halo halo teman-teman semua kembali lagi di playlist belajar nojs Masih bersama saya Sadiqah Galih di channel web programming Unpas kali ini kita akan belajar mengenai sesuatu yang disebut dengan Express qngin ya setelah sebelumnya kita sudah mencoba membuat sebuah webserver sederhana untuk menampilkan halaman-halaman web menggunakan sebuah Framework yang namanya Express Nah sekarang kita akan menggunakan sebuah modul untuk mempermudah kita mengelola tampilan dari halaman-halaman web kita tadi Nah sekarang kita coba lihat dulu penjelasan singkat mengenai qngin ini apa ya jadi view jin atau disebut juga dengan template engine atau templating engine ini sebetulnya adalah sebuah cara kita untuk mempermudah pengelolaan file statis halaman web pada aplikasi kita nanti di dalamnya di dalam enzim tersebut kita bisa membuat sebuah variabel yang nanti variabelnya itu akan diganti dengan nilai sebenarnya dan menampilkan dalam bentuk html jadi nanti dari ekspresinya yang bisa mengirimkan data ke dalam file fueng indita atau template engine kita nanti template engine ya bisa menangkap data tersebut dan menampilkannya ke dalam sebuah variabel dengan menggunakan template engine juga akan membuat kita bisa memisah misahkan bagian dalam halaman website kita dan lebih mudah jadi nanti tujuan utamanya adalah untuk mempermudah pembuatan halaman web kita nah di dalam Express ini banyak sekali template engine yang bisa kita pakai yang kita udah tahu dari video sebelumnya Yang kalau kita lihat di website ekspresinya itu ada lebih dari 20 templating engine yang bisa kita gunakan ya dan cara penggunaannya pun mirip-mirip ya Jadi teman-teman bisa lihat aja dari masing-masing dokumentasi template engine nya yang akan kita pakai di video kali ini atau di seri kali ini adalah sebuah templating engine yang namanya ejs atau singkatan dari embedded javascript templating engine Nah kenapa kita pilih nya AJ gak pakai yang lain ya yang pertama Nah kalau kita lihat dari websitenya nih kalau kita lihat dari websitenya ejs itu penulisan sintaks simple ya terus juga set up untuk aplikasi Xpress kitanya juga simple dan eksekusinya cepat lalu juga cara kita untuk mendebet atau mencari kesalahan ketika ada Error itu mudah terus juga pengembangannya sangat aktif kontributornya banyak juga tutorialnya cukup banyak kalau kalian cari di internet dan yang terakhir mungkin Kenapa alasan Saya memilih ini karena pada awalnya ejs ini dibuat oleh pembuat yang sama dengan yang bikin Express gitu Jadi saya pikir karena pembuatnya sama pasti dia lebih tahu bagaimana cara kerja dari Express dan pasti bisa lebih kompatibel ya walaupun sekarang pembuatannya sudah dilanjutkan oleh orang yang berbeda ya tapi sekali lagi ini salah satu aja template engine yang bisa kita pakai ya kalau teman-teman mau pakai yang lain nanti misalkan pakai Pak Pak handle bars atau yang lain itu silahkan yang akan kita lihat penggunaannya di seri ini adalah ejs oke B Langsung aja kita lihat Gimana sih cara paket dari templating engine AJ sini Oke teman-teman jadi langsung aja kita akan masuk ke materi 15 membahas mengenai flu engine yang pertama akan kita lakukan seperti biasa kita akan menduplikat dulu folder dari video sebelumnya yang sekarang saya kan salah lagi nih harusnya folder saat ini adalah folder untuk video ke-15 ya yang pertama siapkanlah duplikat dulu kontrol C Om Rofik ya kita punya folder 13 Express webserver karena kita rename dengan nama 15 Express view engine Hei kalau kalian mau tetap menggunakan folder yang lama nggak masalah juga ya Tapi nanti harus diperhatikan aja ada kode-kode yang akan kita ubah dan kita hapus langsung kita buka foldernya ke dalam Visual Studio code kita eh kita ulas sedikit jadi kita sekarang punya beberapa file yang pertama tentu saja adalah f. de sini sebagai entry point kita lalu kita punya beberapa file Wulan halaman webnya dengan ekstensi html yang setiap file-file html ini kita Panggil dengan cara membuka isi filenya ini sebetulnya apapun isi filenya kalau ini bukan html sebetulnya tetap bisa tampil kalau misalkan ini txt atau Jason bahkan itu tetap bisa tampil karena fungsi yang kita gunakan adalah sendfile Nah kalau misalkan kita coba jalankan ya kita jalankan itu udah tahu kita bisa pakai nomornya saat ini not Mount pasiem eh lalu kita lihat hasilnya Nah jadi kita udah bisa lihat ada beberapa halaman web ya ada halaman home ada alamat about dan halaman kontak kebetulan halaman about dan kontak ini kita menggunakan starter template dari bootstrap sehingga tampilannya agak berbeda dan ini kontrol besar ini karena saya perbesar aja ukurannya harusnya normal sebesar ini tapi saya zoom-in supaya teman-teman gampang melihatnya dan kita juga sebetulnya udah bikin satu halaman yang tanpa menggunakan halaman html di sini kita lakukan ini agar kita bisa mengambil data dari warel kita ya Oke jadi harusnya saat ini teman-teman udah paham Bagaimana cara menggunakan Roads di dalam Express nah cuma problemnya di video sebelumnya adalah kita nggak bisa dengan mudah dan dengan fleksibel mengelola tampilan kita atau istilah kita adalah view kita pencet ini kita akan coba mempermudah itu dengan menggunakan sesuatu yang disebut dengan templating engine b apa itu templating engine sebetulnya itu adalah cara mudah untuk mengelola tampilan dari website kita kalau teman-teman berangkat dari bahasa pemrograman PHP seperti saya itu kita tahu kalau kita gunakan Framework yang namanya CodeIgniter atau Framework yang namanya laravel itu didalamnya sudah tertanam yang namanya templating engine Nah untuk Express ini templating engine yang bisa kita gunakan itu banyak jadi kita bisa memilih template engine sesuai dengan keinginan kita baik itu kebutuhan maupun selera kita ya Coba kita buka dokumentasi Express nah lalu kita akan Arahkan ke bagian resources lalu di sini kita lihat ada yang namanya template engine ya kalau kita klik kita bisa lihat disini ada banyak ya templating engine yang bisa kita pakai yang akan kita gunakan adalah sebuah templating engine yang dinamakan dengan tej's nomornya nah ini kenapa saya gunakan kerennya penggunaannya mirip banget dengan penggunaan template engine type HP jadi kalau misalkan teman-teman sama seperti saya juga dari bahasa pemograman PHP itu harus lebih mudah untuk memahaminya teman-teman boleh klik aja Link yang ada di sini kalau mau diarahkan ke kitabnya tapi saya mau lihatnya dari MPM ya jadi kita bisa buka mjhj lalu kita tulis aja ejs ini ada yang namanya ejs atau embedded javascript template Nah kalau teman-teman masuk ini bisa lihat bahwa weekly download-nya itu 9juta yang artinya berarti ini cukup populer template engine nya jadi nanti akan kita lakukan kita install dulu AJ ya kedalam aplikasi Xpress kita terus nanti kita bisa lihat disini Cara pakainya Seperti apa ya tapi yang akan kita lihat adalah di bagian basic Usage nya kalau kita masuk ke kitabnya ya kitabnya terus kita lihat di sini ada ejs dot co ini adalah website resmi dari ejs nya kalau ini kan website dari NPM Fenty sambil kita buka dokumentasinya sambil kita cari tau gimana Cara pakainya ya langsung aja kita kembali ke kode editor kita kita rapikan dulu sedikit ya supaya komentar-komentar di halaman ini hilangnya tidak boleh buka f. de sekitar Hapus semua komentarnya Nikita hapus ini kita Puspita rapi-rapi kan dulu supaya enak Nanti modding nya Tapi semua yang di bawah oke sip sudah orang kita close dulu sabarnya kita buka Terminal kita matikan dulu nomornya kita clear kita akan install caranya kalian tulis NP Ajeng install hejs ya kalau mau versinya = saya kita langsung tulis aja at 3.
1. 6 ya ini versi yang sekarang saat video ini dibuat silakan enter lalu tunggu sampai selesai kalau sudah berarti ini harusnya sudah masuk ke dalam dependensi kita yang perlu kita lakukan adalah kita kasih tahu dulu agar Express kita menggunakan view Yks jadi saya kasih komentar atas disini gunakan ejs caranya kita Panggil F titik set lalu kynya adalah view engine value-nya adalah ejs jadi kita kasih tahu dulu bahwa kita akan pakai AJS oke terus Cara pakainya gimana kalau kita udah pakai Jazz atau pakai VN yang lain itu Express nya sudah mendeteksi ada enggak halaman viewnya di dalam folder views itu jadi supaya rapi kita harus simpan semua tampilan views kita ke dalam folder terpisah kebetulan kita masih simpelnya Dirut seperti ini ya jadi biar rapi gimana kalau kita bikin folder baru kita kasih nama views ini walaupun sebetulnya foldernya bisa kita ganti dengan mengganti juga tempat penyimpanan views nya tapi biar sesuai dengan aturan kita bikin aja views lalu kita simpan semua filenya kita bisa draggin Iya tarik ke sini ke dalam folder first sudah sekarang gimana cara manggil virusnya ini gampang banget kita nggak perlu lakukan seperti ini tangga perlu buka filenya tapi kita langsung bisa gunakan ini bisa kalian komentari atau Boleh dihapus aja tersimpan di bawahnya kita bisa pakai Rush titik render dengan melakukan ini kita langsung bisa memanggil halaman di dalam folder views caranya cukup tulis Pak filenya saja Misalnya kita mau panggil indeks gini ya dia langsung mencari ada enggak file index di dalam folder views kita gak perlu menentukan lagi folder root nya dimana kita coba jalannya teman-temannya di kalian bisa save lagi lalu kita jalankan not-notnya kalian boleh ketik nodemon lagi atau clear dulu nodemon map by kita kembali ke browser ini kita hapus enter nah ini error katanya Yah katanya file to look up indeks katanya enggak ada file namanya indeks di direktori views Padahal kita Udah punya ya Kanada indeks syaratnya supaya ini bisa terbaca oleh Fuad Zen Ya kita harus ganti ekstensi filenya sesuai dengan Kyuhyun yang kita gunakan kita pakai ejs tarinem aja indexnya jadi indeks titik Agnez ya kalau pakai KYT yang lainnya Cuma kalian Oke Pak Kalian pakai handle bar nama file-nya harus diubah Oke kita langsung ganti semuanya Jaya kontraknya juga sama kontak ajdj about juga sama dari Neng about a Jazz Hai Oke sekarang kita kembali lagi ke browser kita refresh langsung tampil kalau kita buka halaman yang lain about Masih error kenapa karena kita belum ubah di sini ah jadi kita ganti aja lah kita bisa copy Hai calon Sugandi aja ya enggak usah dikomentarin karena itu udah ada di video sebelumnya kita ganti menjadi terpaut dan yang terakhir kita ganti ini jadi kontak oke kita save yang produk kita biarkan dulu untuk sementara Persib balik lagi ke browsernya kita refresh sudah Man kita bisa ke home1 about kita bisa ke kontak kita udah tau gimana cara manggil ejs kita udah tau gimana cara penggunaan sederhananya sekarang kita lihat fitur-fitur apa saja yang ditawarkan oleh ejs sini ya kalian boleh ke website resminya atau ke NPM Holy MPM kita bisa lihat nih Katanya kita bisa membuat kontrol dari kontrol lo itu kita bisa bikin pengulangan kita bisa bikin pengkondisian kita bisa mencetak output dengan otomatis langsung melakukan Escape ada karakternya ini teman-teman cara nulisnya itu kita pakai tank yang didalamnya ada tanda persen ya Sekali lagi kalau temen-temen dari Hai pasti udah tahu kalau di PHP itu kan pakai lebih kecil dari tanda tanya PHP lalu tutupnya tanda tanya lebih besar dari kalau mau mencetak layar pakai lebih kecil dari tanda tanya sama dengan sama Ane tapi kalau di ejs itu bisa pakai tanda minus dan lain sebagainya tapi Intinya kita bisa melakukan luping bisa mencetak isi variabel dan kita bisa melakukan include Nah inilah yang kita cari dari fitur Express di video sebelumnya Express gak bisa melakukan includes nanti kita dapat dengan Mudah mengelola tampilan pada template halaman html kita menggunakan input sehingga kita bisa bikin yang namanya parsial ya nanti kita lihat Oke jadi ini adalah beberapa fitur yang bisa kita pakai yang detailnya sekali lagi ada juga di website resminya kalian bisa Klik features disini terus lihat aja dokumentasi dibawahnya kita akan coba beberapa hal yang sederhana nanti sisanya bisa kalian oleh-oleh sendiri ya Misalnya yang paling simpel aja saya mau menampilkan isi dari sebuah file mba oke misalnya kita buka halaman indeks dulu aja deh terbuka halaman indeks misalnya kita Scroll jangan di sini kita tulis pakai H2 layani soalnya Halo sandhika Galih ya Saya menulis nama saya langsung ke dalam teks html Oke kita jalanin pasti tampil ya enggak ada masalah eh tampil Tapi gimana kalau misalkan sandhika Galih mau saya ambil dari variabel nah caranya itu kita bisa bikin aja pake tank Express jadi caranya lebih kecil dari tanda persen lalu tutup persen lebih besar dari di dalam sini kita bisa tulis sintaks javascript contohnya misalnya phones nama = candika atau candi calgary Hai mbak srini aja terus gimana cara kita mau ngambil isi dari variabel nama kita tinggal ganti tulisan sandhika Galih ini dengan lebih kecil dari tanda persen sama dengan tutup persen lebih besar dari kita kasih di sini nama ini akan mengambil isi dari variabel nama yang ada di dalam persen ini adalah sintaks javascript Coba kita save dulu kita lihat hasilnya dari fresh sama aja jadi dia sudah bisa membaca isi dari variabel tapi ini teman-teman ya kalau kalian menggunakan Visual Studio code ini enggak otomatis kebaca ya syntax highlighting nya nah gimana supaya gampang kita kedepannya nulisin sintaks ejs gimana kalau kita install dulu aja sebuah extensions untuk mengelola script Ajax jadi langsung aja kita masuk ke tab ekstensi sebelah kiri kita klik lalu kita cari aja extension yang mau kita pakai itu ej nanti di sini ada ejb language support yang paling atas dari digital brainstem eh langsung kita install aja klik install kalau udah beres di close kita close oke nah sekarang temennya tuh langsung berubah warnanya ya ada sekarang kalau misalkan mau nulis teknij kalian cukup pencet tanda persen rap atau kalau mau tulis yang ada sama dengannya ya kalian cukup tulis persen sama dengan Tap atau kamu pakai Cara lainnya kalian bisa tulis ejb Nanti ada ajmal ponselnya n'out ya begini atau nanti kalau misalkan kita mau pakai pengulangan kalian bisa tulis ejs for tiada pengulangan dalamnya tapi terendah akan kita bahas berikutnya sekarang yang kita bahas setelah kita udah tahu gimana caranya mencetak Isi sebuah variabel karena kita bisa menuliskan javascript di sini tapi gimana kalau misalnya data nama ini saya enggak mau tulis disini Tapi saya mau kirim df. com kirim disini di raut get kita karena nanti pasti seperti itu ya kita dapetin data entah itu dapetin data dari database dari FPI atau kita olah sendiri datanya di sini baru kita kirimkan ke indeks yang jadi caranya gimana ini boleh kita hapus aja kita biarkan karena kita tetap akan mengirimkan data namanya ini save aja kita balik sini cara ngirimin datanya itu simple banget kita tinggal tambahkan parameter baru di sini kasih koma Setelah lama viewnya lalu kita kasih objek isi dari objek akan terkirim ke dalam two Indeks ini contohnya kita kasih aja kynya nama value-nya Sandika sudah dengan melakukan seperti ini maka anda ternama akan dikirim ke sini kita coba cek dulu kita balik sini kita refresh terus sudah begitu pula jika kita mau ngirimin misalnya title buat judul halamannya Hai Kan halaman home retail ini langsung akan kekirim ke sini kalau mau kita pakai langsung aja kita cari title kita ganti nih caranya persen sama dengan karena kita Mau cetak isi dari variabel lalu kita tulis apa title percaya jadi kalau misalkan dcv balik ke sini kita refresh lihat judulnya sudah berubah jadi halaman hop Mantap ya Sekarang gimana kalau misalnya datanya Ternyata banyak enggak cuma satu string integer gule anda cuma begitu gimana kalau misalnya datanya Rey misalnya contoh paling simple kalau misalkan kita punya data mahasiswa seperti biasa ya jadi misalkan kita punya variabel namanya mahasiswa yang isinya adalah Rey dimana didalamnya Iya punya beberapa objek gini kita bikin dulu ya karena simpel aja masih suatu pasti punya nama saya tulis lagi Nama saya dan email Oh ya begini Ini baru satu mahasiswa akhirnya kita punya tiga mahasiswa seperti biasa kita blog kita duplikat alt shift bawah dua kali ke tinggal ganti namanya kedua bisa namanya Erik ketiga namanya Doddie Hai Nah sekarang kita punya variabel yang isinya objek mungkin aja nanti ini kita dapetin dari data Besok dari Epi Sekarang kita akan kirimkan ke sini biar rapi saya biasa tulis ke bawah begini Jadi saya bisa enter terus koma disini enter data ketiga adalah mahasiswa kynya yang saya ambil dari isi dari mahasiswa yang kiri mahasiswa ini lelaki yang saya buat mahasiswa yang ini ngambil dari variabel mahasiswa harus sekali udah tahu kalau misalkan kita membuat sebuah objek yang Kid and value yang sama ini bisa kita hapus Ini sama aja Eh jadi sekarang data mahasiswa juga sudah dikirimkan ke sini Tinggal gimana cara menampilkannya kita ambil contoh gini deh seakan di bawah sini kita mau bikin daftar mahasiswa itu Ya kita tulis pakai URL di sini LED Hai sangka hal yang kedua email Gini misalnya ini kan masih kita tulis manual kita lihat dulu hasilnya sudah tampil Nah sekarang gimana caranya kalau data ini kita akan ambil dari Rey tadi soalnya ini kita butuh looting di sini karena dalam bentuk Three karena kalau misalkan kita langsung chat aku begitu aja misalnya kita tulis persen sama dengan mahasiswa ini bisa juga tapi yang tampil begini teman-teman Kalau kita Seis dari flash kau yang tampil ada tiga buah objek kita butuh dalam ya kita butuh isinya kalau kita harus lakukan pengulangan terhadap isinya karena gimana katanya kita butuh for atau for each ya karena kita bekerja dengan array Langsung aja kita bisa pakai for each cara nulisnya ranselnya Panggil bantuannya ejc jika tahu nama arraynya apa kita punya namanya maha Wah Halo pencet tab biar loncat ke elemen setiap mahasiswa akan kita anggap sebagai elemen mhs atau apapun move m boleh dan isinya ini karena kita pakai berikhtiar jadi otomatis dirapihkan ya Ini juga agak ngeselin sih tapi nanti kita lihat nanti kita masukkan url nya ke dalam kalian bisa blog bisa langsung dicat atau pendeta LTE atas supaya simpan kesini sudah jadi ini akan melakukan luping Ya mirip banget sama PHP ya kita akan melakukan luping menggunakan for each terhadap Arema siswa kalau begini aja kita jalankan teman-teman ini seks tahu sandhika Galih akan dicetak tiga kali sesuai dengan jumlah elemen pada arraynya tapi kan kita enggak mau tulisannya sandhika Galih semua ya kita mau ngambil dari Rey caranya kita ganti ganti pakai persen sama dengan Tab lalu kita tulis mhs kita ambil propertinya nama dapat dari mana nama dapet dari arahnya dari sini lama ya Jadi tinggal satu lagi kita pus hitam butuh SN = mhs Email sudah kalau kita save kita kembali ke sini datanya sudah bisa didapatkan dari Re mana Pean sebenernya jadi gampang dengan menggunakan fluent Jin contohnya ej sini selain for dan for its Kita juga bisa menambahkan IPB sebagai salah satu dari kontrol tadi kalau misalkan kita mau kasih contoh kalau misalkan kosong ceritanya ya Renya kalau misalkan adanya kosong dengan kalau saya jalanin tampilnya kosongkan gini ya karena enggak ada mahasiswanya Gimana kalau misalkan kita cek kalau enggak ada mahasiswanya Tuliskan misalnya data mahasiswa masih kosong ada tulisan gitu misalnya jadi kita harus cek nih tak bisa cek disini menggunakan if karena kita akan cek Kalau kosong dulu jadi saya bisa tulis ejb iftah begini jika mahasiswa Kalau kosong gimana Kalau kosong itu berarti kan kita bisa cek aja titik clear Ini adalah sebuah fungsi untuk menentukan panjang dari sebuah Rey Jadi kalau lesnya lebih kecil dari satu misalnya ya atau artinya nol itu kan berarti nggak ada isinya ya langsung aja Misalkan kita pakai tag paragraf disini data mahasiswa masih kosong kami sekali lagi sayangnya dengan menggunakan prettier ini otomatis dirapihkan ya karena kau ada di save kita lihat hasilnya Hai Nah sekarang kosong yang bawah ini tetap dijalankan tapi karena dia favoritnya kosong ya udah tampil kosong tapi kalau kalian pengin ini enggak mau dijalankan kita bisa tambahkan else dan biasanya enggak tulis itu tapi kalau mau kalian bisa tambahkan di sini else itu Ini taruh di bawahnya kita rapiin gini kita tutup elne di sini kita pakai persen tutup nah Yahoo direfresh aman kalau misalkan kita isi lagi arahnya begini kita save kita balik sini maka sekarang ada lagi begitu yang teman-temannya kita bisa melakukan control flow di dalam ejb selanjutnya kita masuk ke fitur yang cukup keren kita akan mencoba melakukan sistem layout ya coba gini Sekarang kita akan bekerja dengan halaman about dan kontak kita buka dulu yang indeks kita biarkan sejenak V geser kanan sini tidak ada about dan kontak secara kebetulan dua file ini kita pakai bootstrap-select dulu tampilannya about dan kontak2 file ini isinya tuh identik kecuali isi dari bodinya bagian atasnya sama bagian bawahnya sama Nah kalau misalkan kalian nanti punya halaman view yang isinya hanya berbeda di bagian tertentu saja itu kalian sebaiknya menggunakan sistem level contohnya nih untuk yang halaman about ceritanya halamannya akan saya bagi menjadi empat bagian bagian pertama adalah bagian headernya bagian kedua adalah bagian link-nya atau navigasi lah kita bilangnya bagian ketiga adalah konten untuk halaman ini jadi cuman ini aja nih dan bagian keempat adalah footernya kita akan pecah pala jadi seperti itu supaya nanti setiap halaman bisa menggunakan File layout yang sama jadi cara saya Gini caranya adalah kita bikin dulu sebuah folder di dalam virusnya yang namanya leafs ini folder yang saya buat bukan aturan dari ejs nya bukan aturan dari ekspresinya ini ceritanya Saya mau buat ada yang suka bikin folder ini namanya parsial ada yang bikinnya layout Sama ajalah ceritain Saya mau bikin layout yang didalamnya ada tiga file yang pertama yang memiliki namanya header do tej's kedua Naff titik AGS ketiga adalah futher detik ejs ya semoga lagi sabarnya maunya bikin tiga dulu file seperti ini gimana nanti isi dari header ini adalah potongan kode yang tadi dari mulai doctype sampai dengan bodi sampai sini Jadi ini mau saya card kalian boleh control.
exe telah diblok sampai sini HPmu dia contrex kita masuk ke header kita price disini jadi ini masih pecah-pecah nah cuman sayangnya karena kita menggunakan pretty ar Hai ini kalau kita save karena ini enggak lengkap htmlnya pretty airnya itu ngebantuin kita untuk melengkapi engkau dengan kita dirkosa pencet kontrol oss. go. di tutup ada ini enggak kita mau ya Nah untuk menghindari ini untuk sementara ini teman-temannya untuk sementara kita bikin Si petirnya mengabaikan filej caranya gimana caranya kita bikin sebuah file baru di dalam rootnya di luar sini jangan di dalam view ini kalau kalian udah pernah pakai cat pasti kenal yang namanya gettin or a pretty er juga punya yang namanya titik berikhtiar ignore dipanasi berikhtiar ini akan mengabaikan valente Tuliskan kita akan mengabaikan apa kita akan Mengabaikan semua file yang ekstensinya ejb jadi Nanti sayangnya priter yang akan jalan di Villages kalau ini hanya untuk sementara aja supaya Demo Kita bisa dilakukan silahkan disave terus di close dan ini hanya akan berfungsi ketika kali install berikhtiar Eh kalau misalkan kalian ngikutin playlist ini dari awal harusnya di dalam extension kalian udah ada berikhtiar nah ini penelitian kalau belum mulai di-install aja sekarang kalau kita kembali ke header terus kita pencet Sei tuh nggak ditutup Ya tapi kalau misalkan Saya pencet Tab tapi kalau misalkan kodenya saya enggak rapikan Saya chef dia enggak akan ngerapiin sendiri ya nggak papa Ya sudah kita chef Karen kita ke about lagi sekarang kita angkat bagian nafasnya yang kalian Scroll sampai sini dari mulai h-3 sampai uel tutup memproyeksi kita kenal simpen di sini Teh Hei terakhir adalah Putera dari mulai sini sampai akhir bakat kita ke futher kita PES kita save by kalau sudah ini kan udah kita pecah-pecah nanti kita rangkai disini menggunakan syntax pernah nanyain Kelud jadi caranya kalian tulis persen minus persen minus sama persen sama dengan ini sama-sama untuk mencetak ke html tapi bedanya adalah kalau pakai sama dengan semua kayak html-nya nanti akan ditulis sebagai Escape karakter Jadi kalau misalkan ini nanti akan diterjemahkannya jadi protein dan LTE ini enggak kita mau kita pengennya dicetak sebagai lebih kecil dari eh Jadi pakai persen minus theme lalu kita tulisin clone kurung buka kurung tutup isinya adalah alamat tempat penyimpanan viewnya atau tempat penyimpanan Lay out-nya kita tulis lay-out relatif terhadap folder views ya lalu header ini terus kita tulis lagi persen minus include lay-out nah yang terakhir di bawah sini Ayo kita gantikan futher tadi pakai persen mines in Clown puter Ok Jangan lupa like out ini gue jadi langsung memanggil header Naff dan footer kita lihat kalau cc kita refresh halaman about ya Refresh dulu kita tuh halaman about sama jadi kalau kita Klik Kanan view page source Ya udah langsung ambil dari halaman-halaman yang kita tulis kalau ingat jangan pakai sama dengan karena kalau pakai = hasilnya gini kita save kita balik ke sini Ta refresh Oh ini hasilnya gini dicetak settingnya kalau kalian lihat sourcenya dicetak jadi html entity atau html Escape karakter kayak gini kita enggak mau makanya kita pakai minus nah sip udah sekarang untuk halaman atau nah ini juga sama kayak beda cuman ini aja bicaranya ya udah ini kita copy aja semua kita masuk ke kontak kita kontrol a-con trophy Nah tinggal ganti ini adalah halaman kontak sudah selesai save tari flash Masuk kontak Sudah masuk about sudah tipe ah itu juga mempermudah dengan kita menggunakan template tadi Nah sekarang gimana caranya kalau mau ngirimin data juga ke halaman ini bisa kita mau bikin judul dari halamannya berbeda-beda tergantung halamannya jadi misalkan yang halaman about disini tulis halaman about untuk yang kontak di Tabnya ditulis halaman kontak caranya Tinggal kirimin aja datanya dari webnya lewat rautnya caranya kita kasih koma disini kasih objek kita kasih title Hai Misalnya ini halaman about ini kita copy ke halaman kontak Hai ganti jadi kontak Sudah tinggal kita tulis titelnya di mana ih bagian header ini karena dikirimnya ke halaman about maka semua file ini er tetap bisa menggunakan variabel tersebut karena anggap aja ini jadi satu halaman yang sama meskipun melakukan include Jadi tinggal kita tulis disini persen sama dengan team title udah deh Jadi kalau di-save ini harusnya udah ganti ya sekarang kita refresh otak baut about begitu teman-teman ya mudah-mudahan paham sampai sini penggunaan lay out yang Saya rasa udah jauh lebih fleksibel daripada kita manual menggunakan Apa yang ditawarkan oleh ekspresinya saja dan terakhir ini kita akan ubah pendekatan menggunakan Lay out-nya supaya lebih fleksibel lagi ikan lumayan agak ribet ya kita harus ngopi-ngopi tiap halaman kalau ada halaman baru ini kita harus includ di tiap halamannya menurutnya agak ribet Allah kalau bagusnya ketika kita punya satu lay-out utama misalnya yah jadi enggak ke pecah seperti ini jadi kita punya satu lewat utama yang isi-isinya justru ngambil dari leot yang berbeda untuk tiap halaman alangkah lebih bagusnya kalau bisa seperti itu sayangnya ejs ini secara default nggak bisa melakukan itu tapi untungnya ada packaging lain di NPM yang bisa melakukan itu tadi ada yang sudah membuatkan PKS ya agar ejs bisa melakukan gaya templating seperti itu Ya kita lihat kalau kita cari di NPM itu namanya Express ejs lay-out kau kita cari kita Scroll ke bawah nah ini dia ada express.
js lay-out dirumuskan kita klik kita masuk ke halaman paketnya tapi ini saya lihat ternyata umurnya udah cukup lama ya tapi tetep setiap minggunya masih banyak yang pakai kalau misalkan teman-teman punya sistem layout lain yang lebih bagus silakan boleh Saya cuman packaging ini bisa melakukan apa yang saya mau kayak gini kita install dulu ya kita install dulu terus nanti kita lakukan ini caranya kita ketik NPM install express. js Laos Oke kita kembali ke Visual Studio code kita buka Terminal kita matikan dulu nomornya A clear kita ketik NPM install Express Dash ejsj like out versinya 2. 5.
0 Oke center sebetulnya kalau kalian Langsung install ini pun enggak masalah ya karena ejs nya akan langsung terbawa Eh kalau sudah kita kembali jalankan lagi nontonnya sip kita close terminalnya lalu kita pakai karenanya kalian masuk ke fds kita Scroll ke atas kita tinggal required dulu ini kita Panggil Express Lay out-nya jadi bawah sini kita tulis conscripts leitz Hai itu tarik wayar kalau tadinya ej gaperlu diriku air karena disini dia langsung memanggil ya Sekarang pun tetap samaview engine nya pakai AJS Express layout hanya mempermudah penggunaan ejs nya aja kita tulis Express ejs layout Oke rooseto pnya adalah kita Panggil ini e. p. Yes di bawah sini kita tulis e.
p.
