Kembali lagi bersama saya prawita hudoro pada materi kali ini kita akan mempelajari bagaimana membuat fresh FPI yang terkoneksi dengan database MySQL selain daripada itu kita juga akan menggunakan not GS dan Express JS dalam pembuatan rest fbinya harapannya dengan mempelajari materi ini teman-teman bisa membuat race FPI dan bisa mengimplementasikannya untuk project-project web ataupun mobile teman-teman semua demikian selamat mempelajari untuk membuat sebuah Project dengan menggunakan xpcs pertama kita perlu membuat sebuah folder di mana Project kita akan dibuat nah saya akan menggunakan terminal untuk membuat folder tersebut nah saya sudah masuk di dalam folder saya kemudian saya akan membuat sebuah Project mkd yaitu membuat direktori baru kita beri nama express my SQL Nah setelah foldernya jadi kita masuk ke folder tersebut Nah sekarang kita sudah membuat folder kosong ya Nah teman-teman bisa membuat folder ini tidak hanya melalui Terminal tapi juga bisa menggunakan Finder ataupun Explorer di OS kalian masing-masing baik sekarang kita akan buka di vscode nah ini masih folder kosong Nah kita bisa membuka Terminal tidak hanya aplikasi terpisah Nah kita bisa buka Terminal kemudian new Terminal nah muncul lah terminal di sini dan kita bisa running instruksi-instruksi yang kita perlukan yang pertama kita perlu lakukan adalah menginisialisasi Project javascript kita kita bisa menggunakan Hian inid ataupun NPM Init ya Nah kita akan ditanya beberapa pertanyaan singkat seperti nama projectnya versi kemudian deskripsi entry Point Oke semuanya sudah selesai dan kita sudah membuat package dengan demikian kita sudah membuat setup pertama untuk Project javascript kita atau night CS kita selanjutnya kita akan menginstalkan package yang kita perlukan Nah karena saya menggunakan yard cara install seperti ini ya yang add tapi kalau teman-teman menggunakan NPM bisa saja yaitu dengan NPM install kemudian nama package yang pertama adalah Express ini sebagai frameworknya Kemudian yang kedua not Moon teman-teman boleh menginstalnya terpisah satu-satu ataupun langsung bareng seperti ini juga bisa baik sekarang Project javascriptive kita sudah terinstall Express dan juga not Moon ya jadi dua-duanya sudah kita install untuk memulai Project Express kita Baik untuk selanjutnya kita akan mencoba untuk membuat server di dalam Express CS pertama kita akan membuat file di luar ya di root foldernya index.gs nah kemudian di sini Yang pertama adalah kita akan mengimport Express nya kita buat variabel namanya Express sama dengan require kemudian kita Panggil Express Nah karena tadi kita sudah menginstall Express jadi bisa kita Panggil selanjutnya untuk membuat server itu kita akan buat app dulu nah ini adalah Express sebuah function ekspresi kita Panggil kemudian kita cukup memanggil app.listen artinya si Project Express ini akan mendengarkan port berapa Nah kita akan membuat sebuah port di sini katakan portnya biasanya di 4000 atau 3000 juga boleh tapi karena 3000 itu biasa dipakai di front end Saya biasanya di 4000 ya kemudian kita buat function di sini follback-nya kalau berhasil membuat servernya kita akan konsol server berhasil di Running di port 4000 seperti ini kita akan coba save kemudian kita running ya Nah di sini karena kita tadi sudah menggunakan Dortmund kita bisa langsung spesifikasi script kemudian kita running untuk start not Moon index.s Artinya kita akan memerintahkan notmoon untuk menjalankan index 7 GS kalaupun teman-teman tidak menggunakan Dortmund ini bisa diganti menjadi not seperti ini artinya kita memerintahkan not atau not JS untuk merangning index 7S kita baik kita tambahkan Dortmund karena kita menggunakan Dortmund setelah itu tinggal kita running dengan ion Nah kita bisa melihat bahwa server berhasil di Running di port 4000 sekarang kita sudah berhasil membuat server di Express sebelum memulai lebih jauh tentang race FPI kita akan berkenalan dulu dengan tools yang biasa kita gunakan untuk pembuatan dress FPI salah satu diantaranya adalah a Postman posman di sini bisa kita gunakan untuk mencoba FPI Kita dimana FPI kita tidak bisa kita langsung running di browser karena keterbatasan metode yang bisa diprovat oleh browser dalam artian kalau browser tersebut belum kita install kan aplikasi seperti web yang kita gunakan itu akan kesusahan kalau kita menggunakan browser maka dari itu akan lebih mudah menggunakan tools seperti Postman salah satunya karena Postman bisa menghandle seperti kemudian delete patch Dan juga mungkin food bisa di handle secara langsung di Postman ini Nah teman-teman bisa masuk ke postman.com Nah di sini kita bisa menggunakan Postman ini baik melalui web ataupun Melalui aplikasi desktop Nah bagi teman-teman yang mungkin kerjanya mobile dan ingin ringan di laptopnya bisa menginstal bisa menggunakan versi webnya atau bagi teman-teman yang mungkin performa laptopnya cukup baik bisa menginstallkan juga aplikasi desktopnya Nah di sini saya sudah membuka sample untuk Postman yang saya running di dalam browser jadi saya tidak perlu menginstall kan di dalam laptop saya Saya cukup buka Postman kemudian login di situ langsung saya bisa mengakses semua workspace saya yang saya siapkan di Postman selanjutnya nanti teman-teman akan banyak melihat saya menggunakan Postman untuk menguji coba setiap rooting atau setiap metode yang saya siapkan di dalam Express selanjutnya kita akan mempelajari basic routing di dalam Express pastikan sebelum kita memulai setiap aktivitas kita dalam Express server kita selalu kita runding ya kita jalankan Yan start dan biarkan server itu terus berjalan selama kita menggunakan notmoon setiap perubahan kita akan langsung dibaca dan akan langsung di Running tanpa harus kita merestart servernya Oke kita hide dulu untuk terminalnya nah yang pertama yang harus kita pelajari tentang basic routing di dalam Express ada sebuah pattern yang biasa dipelajari di dalam Express itu seperti pembuatan F kemudian methodnya apa kemudian Pathnya setelah petnya baru handlernya jadi mau ngapain nah ini pattern yang biasa digunakan untuk mempelajari routing di dalam Express ambil contoh yang paling umum kita bisa menggunakan app use metodenya itu use Maksudnya apa metodenya use artinya kalau kita menggunakan use kita bisa menggunakan semua method dari mulai post patch dan seterusnya itu bisa di handle di dalam use maka dari itu use ini sendiri biasa digunakan sebagai middle wear dimana dia akan menghandle semua metode kemudian kita lakukan proses handling middler di dalam fungsi tersebut lebih jauh kita akan mempelajari middle where di materi yang lainnya kita akan lanjut di sini methodnya use kemudian setelah itu kita definisikan path-nya petnya itu url-nya akan seperti apa contoh garis miring atau garis miring users atau garis miring produk itu juga boleh itu patchnya habis sampel kita buat default-nya yaitu garis miring artinya kalau kita biarkan user masuk ke FPI kita akan masuk ke garis miring ini kemudian kita siapkan handlernya handlernya berupa function seperti ini nah di dalam function ini akan menerima 3 parameter yaitu request respon dan juga Next Nah baru di sini handle nya mau seperti apa nah saya ingin di sini memberikan respon kepada user Saya akan kirimkan sebuah teks katakan hello world Nah ini bisa dilakukan dengan seperti ini artinya kita mengirimkan respon kepada user dan kita akan kirim berupa teks hello world Nah kita akan coba simpan baik selanjutnya akan kita running method pertama kita yaitu use di Postman saya di aplikasi Postman kemudian saya buka tab baru langsung kita running di http lokal host Nah kita tentukan portnya yaitu 4000 sesuai dengan yang kita buat tadi di Express kemudian Padnya di garis miring artinya di part utamanya kemudian klik send nah dia akan mengirimkan hello world sesuai dengan yang kita buat di dalam expressnya di sini mengirimkan hello world dan di sini methodnya bisa kita ganti-ganti dengan apapun mau post juga sama kita send dia akan Hallo karena yang kita gunakan adalah metode use di sini nah kita bisa membuat spesifik juga tidak hanya use kita buat spesifik contoh gate saja kemudian sama di sininya request respon dan next karena next jarang kita gunakan karena ini bukan middle wear kita hapus saja Cukup dua seperti ini kemudian kita akan respon dosen kita kirimkan Hello get method nah seperti ini sebagai pembeda kita akan buat juga yang posnya request respon Nah kita buat function sama kita respon dosen Hello Pos method seperti ini kita akan simpan kemudian kita coba lagi di sini kalau kita running dengan metode pos kita send Audi akan ke Blok sama usenya ya kita matikan dulu untuk usenya kita simpan kemudian kita coba running ulang kita send nah dia Hello post method kalau kita ganti dengan Gate kita send dia akan Hello get method kalau kita ganti dengan metode yang lainnya nah dia tidak akan didapatkan urlnya karena belum kita definisikan untuk url yang lainnya dengan metode di luar dari pos dan get Nah selanjutnya kita sudah bisa memahami di sini tinggal kita buat saja method-met yang lainnya sesuai dengan yang kita perlukan Nah kalau kita mau mendefinisikan yang general kita bisa menggunakan use ini bisa juga digunakan sebagai middle where baik selanjutnya kita akan mempelajari tentang http metode ketika kita membuat Respi ada sebuah method yang perlu kita sepakati bersama dalam artian di sini adalah yang disepakati di dalam pembuatan ras FPI ya Di mana kesepakatan tersebut biasa disebut dengan http method http method ini disini Sebenarnya ada banyak sekali jadi kalau kita melihat di dalam tools seperti Postman kita bisa melihat nih banyak sekali http method ada get Post dan head option link dan seterusnya banyak sekali http method namun memang tidak semuanya kita gunakan hanya ada beberapa saja http method yang sering Atau biasa kita gunakan dalam pembuatan resepi gunanya apa sih http method ini sederhananya ketika kita mengetahui fungsi dari http method ini harapannya ketika kita membuat FPI itu sesuai dengan metodenya contoh ketika kita membuat FPI dengan metode pos karena peruntukan method plus ini biasanya untuk meng-create data maka sebaiknya FPI kita yang menggunakan metode pos memang fungsinya untuk membuat data meng create data baru meskipun pada prakteknya pos bisa saja untuk memberikan data kepada customer seperti halnya fungsinya gate itu bisa saja namun ketika kita menggunakan metode pos tapi fungsinya untuk diet itu akan membuat klien kita kebingungan karena metodenya tidak sesuai dengan method pada umumnya sehingga teman-teman perlu mengetahui terlebih dahulu Apa saja method-met yang biasa digunakan baik kita akan bahas method yang biasa digunakan makan yang pertama di sini yang paling atas method gate ini method yang umum sekali dan sering digunakan yaitu untuk mendapatkan data jadi kalau kita menggunakan FPI dan metode get berarti fungsinya untuk kita berikan data kepada client kita Kemudian yang kedua methodnya post ini adalah untuk meng-create data baru Nah Biasanya kalau kita ingin nge create data baru kita buat metodenya Pos kemudian ada metode Put nah Put ini biasa kita gunakan untuk mengupdate data namun perlu diingat Put ini mirip dengan patch patch juga sama digunakan untuk mengupdate data lalu apa bedanya Put dan patch ini Nah sederhananya kalau menggunakan metode biasanya datanya di replace keseluruhan contoh kalau kita memiliki objek 3 ada nama ada email ada address nah yang kita update nama saja email dan address kita kosongkan kalau pakai Put maka address sama emailnya akan langsung dihapus hanya tersisa nama saja sedangkan kalau pakai patch kalau kita hanya mau mengupdate nama saja itu bisa sedangkan yang dua lainnya kita abaikan Nah itu bisa seperti itu sehingga teman-teman kalau mau update pilih pilih ya mau menggunakan food atau menggunakan patch sesuai dengan fungsi seharusnya Dan Terakhir yang sering digunakan adalah method delete delete ini adalah untuk menghapus sebuah data kita di dalam database Nah maka dari itu ketika kita sudah mengetahui fungsi dari http metode ini harapannya teman-teman nanti membuat dress FPI sesuai dengan http method seharusnya selanjutnya kita akan mempelajari tentang response yang biasa diberikan di dalam sebuah aplikasi Express CS Nah kalau kita melihat di sini setelah kita membuat sebuah method app pos app get dan seterusnya kalau kita lihat kita mengirimkan race dot send Nah di sini Maksudnya apa sih maksudnya kita memberikan response kepada client yang memanggil FPI kita di Path ini dan kita kirimkan kita send sebuah data sesuatu ya kepada client Nah di sini Respon yang bisa kita berikan kepada klien itu ada banyak tentunya tapi saya akan highlight 3 saja yang biasa kita berikan yang pertama kita memberikan respon kepada client berupa teks nah ini teks seperti biasa Nah kalau kita coba running di dalam Postman Nah tadi methodnya gate kemudian kita send Nah kita akan dapat teks Hello get method dan statusnya 200 nah ini kita juga bisa berikan tidak hanya berupa teks tapi bisa juga kita kirimkan dalam bentuk HTML contoh kita mau H1 kemudian hello world seperti ini kemudian kita simpan Masih sama kita akan akses ke rootpad kita send dia akan menerima H1 Nah kalau kita lihat previewnya dia akan berupa tag HTML ya jadi hello world kalau orang lain mengakses FPI kita melalui browser dia akan dapat langsung tag HTML seperti ini jadi kita bisa mengirimkan data kepada user berupa tag HTML itu juga biasa kita lakukan nah yang terakhir yang biasa diberikan kepada user adalah Jason nah ini kita ganti menjadi Jason respon.jesen jadi kita akan mengirimkan Jason Nah kalau Jason ini di sini identik dengan objek seperti ini contoh saya akan memberikan nama prawito kemudian email seperti ini Ini Jason ya kalau kita kirimkan bisa berupa Jason Nah kalau kita coba send lagi di sini kita lihat dalam bentuk pretty-nya di sini nama prawito email nah seperti ini ini berupa Jason nah yang mau saya highlight adalah respon yang biasa diberikan di dalam rest FPI Biasanya berupa Jason ya untuk saat ini meskipun pada FPI yang seperti zaman lalu itu biasa juga dikirim dalam bentuk SML ya namun yang akan kita pelajari di sini adalah respon FPI dalam bentuk Jason karena ini banyak digunakan di rest FPI saat ini nah sehingga ketika kita mengetahui respon apa yang bisa kita kirimkan kepada user kita bisa memahami dimana sih sebenarnya beda antara Express JS dalam render sebuah web atau html ataupun menjadi sebuah resei biasanya pembedanya hanya direspon seperti ini saja Jadi bagi teman-teman yang mempelajari Express kemudian biasanya ekspresi yang digunakan untuk pembuatan web jadi ada HT emailnya ada CSS nya biasanya pembedanya nanti diresponnya Nah karena saya meresponnya Jason ini biasa digunakan untuk rest FPI demikian tentang Respon yang bisa kita kirimkan dari FPI kepada client baik sebelum kita melangkah lebih jauh lagi dalam mempelajari tentang Express ataupun race FPI ini kita akan mulai merapihkan secara struktur folder di dalam Project Express kita nah sebenarnya di sini tidak ada aturan baku dalam mengatur struktur folder di dalam Project Express kita semua dikembalikan kepada kalian membuat rest jadi tidak ada aturan bakunya namun saya di sini akan memberikan contoh bagaimana saya biasa merestruktur folder yang ada di dalam Project Express supaya memudahkan kita untuk membacanya memisahkan file-file sesuai dengan fungsinya masing-masing baik di sini kita akan mulai merapikan pertama biasanya saya memiliki folder spesifik untuk seluruh codingan kita yaitu di dalam src atau biasa kita sebut dengan source Nah di sini semua codingan kita berada di src artinya semua perubahan kita biasanya dilakukan di src ini Nah kalau src ini di Indeks ini dipindahkan kita ke src berarti nanti di packet Jason ini perlu dirubah ya jadi src garis miring indeks kemudian setelah itu biasanya saya memiliki folder Roads di sini untuk mengumpulkan semua file-file yang memiliki fungsi routing contoh nanti kita punya banyak Path ya Ada users ada mungkin produk ada mungkin sales dan seterusnya itu akan kita pisah-pisahkan sesuai dengan rootsnya masing-masing selain Roads biasanya saya juga punya folder controller nah controller di sini biasanya sebuah fungsi yang kita gunakan di dalam setiap rootsnya contoh Slice users di situ fungsinya ngapain sih Nah fungsi ini akan kita simpan di dalam controller untuk memudahkan kita kemudian selain controller juga kita memiliki middle wear Nah nanti setelah spesifik Medi luar ini akan kita bahas di materi selanjutnya kemudian selain middle web kita juga punya model ya ini biasanya saya gunakan untuk menyimpan fungsi-fungsi call ke database ya jadi semua fungsi call ke database saya simpan di dalam model kemudian di mana kita set up ke databasenya kita akan set up di config biasanya saya simpan di situ nah kurang lebih folder inti yang biasanya ada di projectv Express saya seperti ini ada config controller model dan Ruth sisanya biasanya tergantung dari projectnya ada folder-folder lain yang biasa saya buat ada mungkin folder validation ada folder util dan lain-lain itu akan mengikuti sesuai dengan fungsi di dalam sebuah aplikasi itu nantinya Namun seminimalnya biasanya saya memiliki folder seperti ini nah kemudian setelah kita memiliki struktur folder seperti ini kita akan perbaiki nih sekarang saya tidak lagi akan mengumpulkan semua metode saya ada di sini tapi saya akan pisahkan ke dalam folder yang sesuai kita akan mulai membuat sample url atau Path users ya kita akan berikan sample Path users pertama saya akan buat dulu filenya di sini users ya kita akan buat users.gs Nah di sini kita akan Nah di sini kita akan membuat sebuah variabel bernama Express sama kita export Express dulu di require dari Express kemudian di sini kita akan mulai membuat root root atau router terserah kita ya kita akan membuat Express router modul export filter baik Nah selanjutnya di sini kita tinggal membuat sama seperti sebelumnya contoh Saya mau membuat metode nya di mana slash users Contohnya seperti ini kemudian di sini request respon dan next nya sama seperti sebelumnya Nah kita buat responnya juga di sini respon dot Jason mungkin di sini message get user success nah kurang lebih seperti ini untuk membuat routing di mana Saya sudah membuat metode dengan Path users nah Namun kita juga nanti bisa menyederhanakan ini Ya dengan menggroupingnya di halaman atau di file index nanti akan kita bahas kemudian di sini juga kita membuat sampel yang lain contohnya post flash users kemudian sama request respon dan next tidak kita gunakan cukup dihapus saja seperti ini kemudian kita buat function respon dot Jason Nah kita akan buat message pos user success [Musik] Nah kita sudah membuat dua Path di sini kemudian Bagaimana cara memanggilnya Nah kita bisa masuk ke file index di sini kemudian kita akan buat di sini f.us nah kita akan membuat path user sebenarnya Nah nanti user itu semua FPI yang memanggil Path Splash users akan masuk ke sini karena saya menggunakan use kan seperti sebelumnya dibahas kemudian di sini yang tadinya biasanya Saya memanggil eropangtion seperti ini saya akan ganti memanggil file users di sini nah caranya kita export dulu contoh kita export dengan nama users seperti ini require kita Panggil dari slash garis miring users seperti ini kemudian tinggal kita pakai saja di sini menjadi users Nah kita sekarang sudah memiliki grouping sebuah Path users sehingga kalau sudah memiliki grouping seperti ini di dalam valusers ini sudah tidak perlu lagi ada user lagi cukup garis miring seperti ini Oke kita akan simpan semuanya kemudian akan kita restart servernya karena tadi ada perubahan struktur folder Oke sudah running kemudian kita coba di dalam Postman Nah di sini kalau kita manggil get seperti biasa dia akan respon juga seperti yang sebelumnya tapi kalau kita Panggil users Nah kita akan send nah dia akan dapat message get user success jadi dia akan masuk ke dalam roots ini kemudian akan masuk ke Path router gate ini kemudian kalau kita ganti menjadi post kita send post user success nah Berarti sekarang kita sudah memiliki Path dengan struktur folder yang semakin baik lagi namun di sini belum selesai sebenarnya biasanya saya pisahkan untuk function di sini nah function di sini itu tidak saya buat di sini tapi saya simpan di dalam controller contoh dikontroler juga sama kita akan buat file sama seperti rootsnya users ke CS Nah selanjutnya di sini Saya biasanya membuat sebuah function sesuai dengan metode yang saya buat tadi di dalam routers contoh di sini fungsinya adalah get all users nah fungsinya sama seperti tadi menerima request dan juga respon kemudian kita buat row function sama kita respon dot Jason Nah kita responkan contoh message-nya [Musik] get all user success seperti ini kemudian kita juga bisa membuat function untuk posnya posnya itu tadi Berarti untuk Create new user ya kita buat request dan respon row function juga sama kita respon dot Jason buat message Nah contoh kita sekarang sudah memiliki dua function nih get user sama Create new user kemudian setelah itu jangan lupa kita export modul.export Nah kita export semuanya ada get all user kemudian ada Create new user Nah setelah kita export kita akan Panggil controller tersebut di dalam routingnya atau rootsnya di sini kita akan export dengan nama user controller Nah kita akan require kita import dari folder controller garis miring users [Musik] Oke sekarang kita sudah memiliki variabel ini kemudian function ini tinggal kita ganti saja Nah kita Panggil jadi user controller dot get all user kemudian yang sama yang posnya juga kita ganti nah ini kita ganti menjadi user controller dot Create new user Nah sekarang jadinya kita sudah memiliki pad api yang rapi sesuai dengan fungsinya Oke selanjutnya kita simpan kemudian kita coba lagi di dalam Postman user get kita set get all user success kemudian kita coba ganti jadi Pos create user success Berarti semua fungsi kita sudah berjalan sesuai dengan seharusnya Nah sekarang kita sudah memiliki struktur folder yang semakin rapi yang sudah kita pisahkan sesuai dengan fungsinya masing-masing Semoga nanti pembuatan resepi kita semakin rapi semakin mudah lagi di maintain dengan struktur folder yang lebih baik selanjutnya kita akan mempelajari tentang middle wear nah middle web ini cukup menarik dan pasti sering kita gunakan di dalam pembuatan dress FPI Nah middler ini apa sih sebenarnya dan bagaimana atau apa fungsinya di dalam sebuah aplikasi atau sfbi pertama middle where ini adalah sebuah fungsi yang mana dia bisa mengakses request kita respon kita dan juga Next kalau di dalam Express nah di dalam fungsi ini karena dia bisa mengakses request respon kita maka dia bisa menjalankan fungsi yang kita inginkan apapun yang kita inginkan maka bisa kita lakukan di dalam middle web nah dilware juga biasa kita gunakan sebagai jembatan atau penghubung ya Di mana middle where ini biasanya pasti dilewati ketika request itu masuk sehingga di dalam ini bisa kita lakukan pengecekan pengecekan yang kita inginkan contoh kita bisa ngecek autentikasi di dalam middle were kita bisa ngecek Jason laptop kan di dalam midware sehingga request selanjutnya ketika kita lanjutkan ke dalam routing yang sesuai sudah dilakukan proses pengecekan sebelumnya Nah maka dari itu kita akan sangat memerlukan middle luar ini Nah sekarang bagaimana sih cara pembuatan middle were di dalam Express kita pertama di luar itu dibuat dengan appded use ya Nah di mana dia bisa mengakses request respon next seperti ini artinya nanti semua request akan masuk ke jembatan ini terlebih dahulu sebelum dia dilanjutkan ke Fuse atau app method yang lainnya maka dari itu di sini kita bisa melakukan apapun contoh kita bisa konsol dot log membuat logging ya di sini contoh Log terjadi request ke FPI ini Nah nanti kita bisa lakukan Apapun ya contoh login ini bisa kita simpan di centry untuk mengecek request-request ke kita ataupun log error juga bisa kita lakukan Nah kita ambil sampel sederhana dulu untuk membuat sebuah middle wear untuk melakukan log setiap kali request Oke kita akan coba simpan kemudian kita akan buka terminalnya supaya terlihat Nah kita akan coba lihat logonya nanti di sini kita akan coba hit dulu ke users ya kalau kita send ke user get boleh post boleh kita send nah dia akan memanggil middle wear kita log terjadi request ke FPI ini namun kalau kita lihat ke dalam postmannya dia akan loading terus kenapa yang terjadi karena setelah masuk ke dalam appus ini kita tidak menyuruh si middler untuk melanjutkan prosesnya sehingga dia Terhenti Di sini maka dari itu setelah melakukan middle ware jangan sampai lupa kita harus memerintahkan request itu untuk lanjut lanjut ke mana tentunya lanjut ke lain selanjutnya di sini nah sehingga nanti kalau ada orang mengakses ke user kita send ke sini dia pertama akan di lock dulu nih log terjadi request ke FPI ini kemudian baru dilanjutkan next ke Line selanjutnya yaitu meriton get users lebih dari satu dan dia akan berjalan berurutan contoh di sini kita akan membuat juga midward yang lain konsol.lock mid kedua kalau kita simpan Nah kita lakukan hit kemanapun contoh kita ganti ke root ke sini kita send nah dia sama seperti tadi low terjadi ke request efek ini berarti ke medula pertama kemudian dia masuk ke middler kedua karena saya lupa memasukkan next sehingga dia terhenti juga sama requestnya di sini nah kita tinggal tambahkan saja next jadi middle where itu bisa kita Panggil berurutan dan kita bisa punya banyak middle web apa saja fungsinya boleh terserah kita mau lo ketika ada request mau pengecekan atau apapun itu Nah setelah kita membuat sample middle luar seperti ini alangkah lebih baiknya si function middle where ini kita pisahkan ke dalam folder Mini di luar contohnya kita masukkan ini function kita Cut saja kemudian kita buat function di sini contohnya adalah log out CS Nah di sini kita akan membuat sebuah log ya log request nah ini sebuah function biasa saja yang mana kita copy paste dari function depan ya kita paste di sini fungsinya untuk melakukan log setiap kali ada request kita ganti messagenya mungkin atau konsolnya low request Nah kita ingin mendapatkan sebuah request.pet kita ingin tahu dia melakukan request ke pet mana ya terjadi request ke Path titik dua Nah kita lihat petnya kemudian kalau sudah jangan lupa kita export modul export kita simpan kemudian kita Panggil juga di sini request Oke kita import ambil dari middle web slash Oke seperti ini sebenarnya tidak perlu ada dot CS ya cukup seperti ini kemudian tinggal kita masukkan saja ke sini middle wear low request nah ini untuk membuat file kita semakin rapi jadi kita buat di file terpisah Oke kalau kita simpan kemudian kita lakukan heat seperti biasa kita lakukan hit ke rottpadnya dia akan muncul Respon yang sesuai namun kalau kita lihat di sini Terjadi request ke Path garis miring artinya ke pad utama Nah kalau kita ganti coba ke sini users kemudian kita lakukan get send berhasil get all user success kita lihat nih ada logo juga terjadi request ke Path slash users jadi kita bisa meng-capture semua request dengan menggunakan middle wear ini Nah selanjutnya teman-teman bisa mengembangkan fungsi dari middle wear ini kemana saja sesuai dengan keperluan teman-teman semua selanjutnya kita akan mempelajari bagaimana membuat sebuah crude di dalam rest FPI tentunya kita akan mulai dulu supaya lebih mudah dengan crude yang bersifat dummy jadi belum terkoneksi dengan MySQL kita atau database kita kita akan awali dengan create nah create Itu adalah sebuah metode untuk menyimpan data ke dalam aplikasi kita melalui metode pos nah Oke kita akan mulai pertama dengan menggunakan Path users sebagai sampelnya Oke kita akan masuk kita mungkin hapus dulu ya yang tidak kita gunakan supaya lebih enak dilihatnya nah seperti ini kita akan masuk ke user roots di sini tentu akan kita mulai dengan create ya Nah ini create dengan metode pos supaya enak kita pindahkan dua ini ke atas ya yang paling pertama kita buat create nah di dalam create ini tentu kita akan memerlukan input dari user yang menggunakan FPI kita nah input dari user ini biasa disebut dengan request body request body ini didapat dari mana tentu dikirimkan oleh user nah cara mensetup supaya kita bisa menerima request tadi karena Biasanya berupa Jason ya Jadi kita akan buat middler juga nih di depan sini kita akan buat middle wear dimana middler ini mengizinkan request body berupa Jason karena kalau tanpa Mi di luar ini Tentunya request body berupa Jason tidak bisa kita terima kita buat sampelnya dulu kita simpan dulu di sini nah sekarang kita masuk ke create user kemudian kita akan coba console request.body Nah kita tidak menggunakan middler apapun nih tapi kita coba langsung konsol request bodynya kita Munculkan terminalnya Nah kita akan coba konsol request bodynya Apakah bisa muncul atau tidak Nah kita akan masuk ke Path users kemudian metodenya post kita akan coba Kirimkan request body nah ini request body kemudian kita pilih row kemudian row ini kita ganti teksnya menjadi Jason artinya saya akan coba mengirimkan Jason name kemudian kita buat email kemudian terakhir kita coba address kali ya Nah kita memiliki Jason name email dan address kita akan coba send Create new usernya berhasil kita coba ngirimkan body Apakah dia bisa membaca ternyata tidak jadi andifine request dot bodynya tidak terbaca Kenapa sih terbaca karena kita belum mengizinkan request body berupa Jason supaya diizinkan kita perlu membuat middle ware di sini nah sama pembuatan midware eh middle wear untuk mengizinkan request body berupa Jason caranya kita akan menggunakan Express dot Jason nah artinya middler ini mengizinkan semua request body berupa Jason kalau kita simpan kemudian kita coba hit ulang untuk post users nya kita send berhasil untuk posnya dan kita bisa melihat request bodynya di sini muncul ya tadi yang kita buat nih dan sekarang Muncul ada name email dan address sebagai request tadinya Nah selanjutnya Mungkin kita bisa menjadikan adalah request body tersebut sebagai respon kita ke user contohnya kita kirimkan data berupa request dot body Nah kita simpan sehingga kalau sekarang kita send di sini Nah klik new user success dan ada datanya siapa email address jadi kalau saya ganti di sini mungkin seperti ini kemudian kita send responnya juga akan berubah sesuai dengan request body yang kita kirimkan Nah sekarang kita sudah berhasil membuat root dummy yang pertama yaitu create dengan metode Post selanjutnya kita akan membahas tentang read di dalam crudemy itu Biasanya kita gunakan dengan metode get ya di sini Artinya kita akan membaca atau mengambil data dari database kita Namun karena ini masih dummy di dalam get all user ini kita akan coba membuat [Musik] sampel dummy ya dami data dimana kita akan buat name prawito kemudian Gmail @gmail.com kemudian address nah ini demi data nantinya si data ini akan kita dapatkan dari MySQL kita atau database kita Namun karena sekarang masih dhami kita buat dalam bentuk variabel saja dulu Nah di sini kita akan coba return kan datanya Oke kita simpan Nah kita kembali ke Postman kita ganti metodenya menjadi get kemudian Nah kalau ini tidak perlu ada request body ya karena ini gate kita get di sini kita send get all user berhasil dan dapat data name prawito email address dan seterusnya Nah sekarang kita sudah berhasil membuat metode get atau read di dalam dummy ground kita baik sekarang kita sudah memiliki create selanjutnya tinggal kita buat update ya tablet ini kita akan menggunakan metode page bisa saja kita menggunakan motherford namun pada case kali ini kita akan coba menggunakan patch sama untuk membuat metodenya kita buat router dulu kemudian kita buat patch nah kemudian kita tentukan urlnya mau kemana nah menariknya kalau untuk update itu biasanya kita memerlukan ID spesifik Kenapa ID spesifik karena kita akan mencari nanti ID mana yang akan kita update datanya Nah di sini di dalam sampel yang sudah kita buat tadi dinami data baiknya kita tambahkan di sini id id-nya contoh di sini string ya satu contohnya Nah nanti kita akan cari di dalam database kita menggunakan query ID 1 kemudian setelah ketemu ID 1 kita akan update datanya sehingga Padnya juga agak lain dengan dengan create dan read tadi kita akan buat Pathnya itu support untuk memasukkan ID spesifik caranya kita bisa menambahkan yang namanya params itu bisa didapat dengan titik dua ya titik dua kemudian parafnya mau kita beri nama Apa contoh Saya mau memberikan nama ID boleh juga dibuat dengan lebih jelas mungkin ide user seperti ini juga boleh nah tapi saya cukup dengan ID saja Kemudian sisanya sama kita akan membuat controller juga di dalam user controller ini nanti setelah saya memiliki get all user kemudian Create new user kita akan buat juga function yang lain namanya Mungkin update user sama akan menerima request dan respon Nah di sini apa yang akan kita lakukan pertama kita akan membaca atau akan kita konsol dulu download request paramits ID ya kita akan coba konsol dapat nggak ya paramsnya kemudian kita akan coba respon dot Jason message update user success nah ini dummy seperti ini kemudian Jangan lupa kita export juga ini update user setelah kita punya fungsinya Kita tinggal panggil saja di sini user controller dot update user Nah sekarang cara menambah pengguna fpinya juga agak lain petnya kita perlu menambahkan ID kita masuk ke Postman nah supaya nanti kita tidak berganti-ganti lagi metode di sini kita akan buat tab yang sama di sini kita panggil ke http localhost 4000 juga sama nah ini ke users nah hanya saja setelah users kita tambahkan garis miring id-nya berapa Nah contoh id-nya kita buat acak seperti ini nah metodenya Jangan lupa kita ganti menjadi patch kalau sudah coba kita hit update user success Nah kita lihat di konsolnya Nah kita bisa dapat nih id-nya 234 234 nah jadi kita dapat di dalam fungsi ini request paramitnya jadi kita sudah dapat paramitnya nah ini biasanya saya derassering jadi dapat dari mana dapat dari request dot parames Id ini dapat dari mana sih Id ini sesuai dengan apa yang kita tulis di dalam sini kalau ini kita ganti menjadi ID user berarti di dalam sini juga perlu kita ganti menjadi ID user seperti ini Nah sekarang kalau kita log ID search nya Nah kita simpan semuanya ini udah merestart kemudian kita hit lagi FPI nya Nah kita bisa melihat Nih ID usernya sudah dapat 234 234 nah seperti ini nah nantinya ini akan lakukan query ke back end untuk mendapatkan ID user ini kemudian ID user ini akan kita update dengan sebuah data nah datanya dapat dari mana sama seperti post tadi patch ini juga bisa menerima request body request bodynya sama berupa row kemudian Ini Jason Nah jadi datanya mau kita update namenya sekarang kita update jadi ludoro kemudian emailnya kita ganti menjadi udoro @gmail.com Nah karena ini patch kita tidak perlu memasukkan address juga bisa jadi nanti dia akan mengganti name dan emailnya saja addressnya nggak akan keganti karena yang kita kirim cuman dua parameter yang sama email saja nah seperti itu kemudian kita akan coba balikan ke user datanya Nah kita akan kirimkan ulang request bodynya nah request bodynya kita kirimkan lagi ke user jadi kalau kita simpan kemudian kita send di sini update user success datanya yang di update adalah name-nya diganti jadi hudoro kemudian emailnya jadi
[email protected] nah sekarang kita sudah memiliki metode patch untuk mengupdate data kita nah yang terakhir untuk damic root kita kita akan memerlukan delete delete ini methodnya juga sama ya delete kemudian kita akan membuat routernya kita ganti menjadi Delete nah untuk Padnya ini mirip dengan update jadi untuk melakukan delete itu kita akan query juga ID mana yang akan kita Delete nah Berarti kita butuh ID user nah seperti ini sama selanjutnya kita butuh function juga untuk delete ini Nah kita akan buat function baru mungkin nama fungsinya di LED user ya request response kemudian di sini sama kita akan dapatkan query untuk ide user dapat dari request [Tepuk tangan] kemudian kita akan memberikan respon dot Jason message nya kita buat dami saja delete user success kemudian pura-puranya kita kirimkan data data mana yang di Delete nah kita akan kirimkan ID user itu dapat dari ID user kemudian name kura-kuranya yang di delete kemudian email terakhir address ada taman elit Oke sekarang kita sudah memiliki function delete user berarti tinggal kita gunakan di sini kita Panggil user controller dot delete user seperti ini kita simpan semuanya oke sekarang tinggal kita coba kita buat tab baru juga di sini kita duplikat saja nah kemudian di sini kita ganti methodnya menjadi delete sama mengambil petnya user garis miring id-nya kemudian ini tidak perlu request body kita buat non saja Nah sekarang tinggal kita send Ups kita lihat ada error di obs kita belum mengeksport ya di sini lupa delete usernya belum kita export Nah di sini delete user kemudian kita simpan Oke kita ulangi kita send delete user success datanya kita munculkan data Dame juga ya kurang lebih metode adalah seperti ini Nah sekarang kita sudah lengkap memiliki semua dummy data dan juga dummy method untuk crude ya create create update dan Delete nah harapannya dengan dubbi data ini teman-teman memahami konsep dari basic crew kurang lebih seperti Apa selanjutnya tinggal kita integrasikan saja dengan database artinya ketika kita create tidak hanya demi data yang kita Munculkan ke user tapi kita simpan juga ke database kita pun sama dengan get users kita juga akan mengambil data dari database dan kita berikan ke user nah bagaimana caranya untuk melakukan itu selanjutnya nanti kita akan bahas integrasi dengan MySQL baik setelah kita memiliki dami data dan juga dumk di dalam reset kita sekarang waktunya untuk mengintegrasikannya dengan MySQL namun sebelum masuk ke integrasi kita ke dengan MySQL saya meminta teman-teman memastikan di dalam laptopnya sudah terinstall MySQL Nah teman-teman bisa masuk ke mysql.com kemudian masuk ke download lalu teman-teman bisa memilih untuk MySQL community jpl download Nah selanjutnya teman-teman silahkan melakukan proses instalasi MySQL dalam laptop teman-teman semua saya mengasumsikan teman-teman sudah menginstal atau terinstal MySQL di dalam laptopnya Nah selanjutnya starter install MySQL kita akan mencoba membuka MySQL dengan tools seperti MySQL workbench ataupun sekuel S Nah teman-teman bisa memilih menggunakan aplikasi mana saja yang teman-teman sukai Nah di sini Saya memiliki dua aplikasi yang biasa saya gunakan untuk membuka MySQL ada squaless kemudian yang satunya lagi my SQL workbench dua-duanya sama saja kita bisa menggunakan salah satu diantara kedua ini dan dua-duanya sama-sama bagus mungkin bedanya yang secuilless ini lebih ringan untuk kita gunakan Oke ambil sampel Kita akan menggunakan MySQL workbench kemudian kita akan coba masuk ke dalam MySQL kita ini diminta masuk ke dalam SQL nya saya masukkan passwordnya Nah setelah masuk ke sini kita akan membuat database kita yang pertama di dalam MySQL workbench untuk membuat database kita bisa Klik icon Ini kredit new skema kita akan berikan nama database kita Apa contohnya kita akan buat Express Nah kalau untuk penamaan di dalam database biasanya saya menggunakan underscore ya express my SQL kalau sudah kita play Nah sekarang sudah jadi untuk database kita Nah selanjutnya kita masuk ke menunya skimas Nah di sini kita bisa melihat database apa saja yang ada di dalam local laptop kita nah kebetulan tadi kita sudah membuat Express Anda Scroll SQL dan sekarang sudah terbuat untuk databasenya kalau kita buka di bagian table di sini belum ada tables yang kita miliki maka dari itu kita perlu membuat tables Nah selanjutnya kita tinggal buat tabelnya di sini Klik Kanan klik table Nah selanjutnya kita akan berikan nama untuk table kita ya Nah di sini kita berikan nama users sesuai dengan damic root yang sudah kita buat tadi yaitu users Nah setelah nama tabel kita perlu menentukan kolom apa saja yang ada di dalam table tersebut yang pertama mungkin kita buat ID atau ID user juga boleh seperti tadi Nah pastikan pk-nya atau primary-nya di ceklis kemudian nn nya not 0 nya juga diceklis kemudian Ai atau auto increment-nya juga di ceklis ini untuk memastikan untuk pembuatan data di dalam table users ini id-nya akan di generate oleh MySQL Jadi tidak kita buat secara manual ini untuk memudahkan saja dimana Nanti id-nya auto increment 123 dan seterusnya Nah setelah kolom ID kita juga memerlukan kolom name ya Nah ini kita buat 225 mungkin kemudian setelah name ada email ini juga sama kita buat 225 yang terakhir ada address ini juga sama kita buat 225 aja Nah sekarang kita sudah memiliki semua kolom yang kita perlukan kalau sudah pastikan skemanya betul skema Express SQL kemudian tekan apply kemudian kita lihat sudah sukses dan kita bisa lihat di table sini sudah ada users Nah di sini sekarang tablenya sudah jadi ya table user selanjutnya saya ingin melihat table usernya contoh kita select all from Express SQL users atau mungkin bisa spesifik seperti ini users Nah kita bisa melihat bahwa ID name email dan addressnya masih kosong Nah sekarang kita bisa melihat bahwa database kita udah berhasil kita buat kemudian table user juga berhasil kita buat selanjutnya kita akan mempelajari bagaimana mengkoneksikan database yang kita miliki ini ke dalam Project Express kita selanjutnya kita akan mencoba mengkoneksikan aplikasi Express kita dengan MySQL yang pertama yang perlu kita lakukan adalah menginstal package yang bernama MySQL to ya kita buat di sini ion add my SQL to Oke setelah terinstall kita bisa membuka dokumentasi dari MySQL 2 Nah ini bisa diakses di sini my SQL to kemudian kita bisa membuat koneksi pertama kita ya kita bisa menggunakan query seperti ini namun saya biasa menggunakan connection pool ya dengan manfaatnya Bisa dijelaskan di sini Oke kita akan coba membuat sampel yang seperti ini kita akan membuat connection full terlebih dahulu kemudian kita export di sini my SQL require my SQL 2 ya kemudian kita buat full kita buat di sini saja Saya biasanya membuat namanya DB full ya seperti ini my SQL create pool dimana kita perlu menentukan hostnya di mana host tool adalah IP kita dan sekarang kita menggunakan localhost kemudian user dari database tersebut nah saya usernya adalah root kemudian nama databasenya Nah tadi kan kita membuat nama databasenya express my SQL ya berarti kita bisa buat di sini ganti Express underscore my SQL yang selanjutnya yang mungkin belum ada di sini adalah password ya nah Adapun semua value ini baiknya kita simpan semua nanti di Inv ya tidak kita simpan di sini sementara kita buat dulu di sini Nah di sini password saya adalah root kemudian usernya juga root ya databasenya Ini sisanya ini boleh dipakai boleh juga dihilangkan ya ini kita remove saja cukup bagi saya seperti ini Nah setelah membuat DB full kita akan coba dulu apakah koneksinya berhasil atau tidak ke database kita Nah kita akan membuat app use kemudian flash seperti ini request respon kemudian kita akan Panggil DB full kemudian execute Nah execute itu adalah untuk mengecek cute SQL query ya S3 itu contoh kita akan mengambil select all Chrome user contohnya nah ini kalau berhasil kita akan membuat callback nya ini kita bisa mendapatkan error row sama field nah biasanya saya menggunakan dua ini saja error sama Rose Nah di sini kita bisa membuat error dan Rose artinya kalau if errornya true berarti kita perlu memberikan respon kepada user message connection failed file ya kemudian kalau berhasil Nah berarti kan kita bisa melihat datanya kita Munculkan saja respon.jesen message connection success kemudian kita kirimkan datanya datanya dari mana datanya dari Rose seperti ini ini kalau berhasil ya kita simpan kemudian kita restart servernya Oke kita akan melakukan proses get ke routenya ya di sini oke kita duplikasi lagi di sini ini kita Arahkan ke flash ke rootpadnya kita ganti menjadi gate saja kemudian kita headset connection success namun datanya Kosong kenapa datanya kosong baik sekarang kalau kita lihat di sini memang datanya masih kosong Jadi kita akan buat dulu dami data di sini kita buat satu kita buat namenya dami saja ya kemudian emailnya email.com kemudian address Oke ini sudah kita buat dummy datanya kemudian kalau sudah kita klik apply oke sudah jadi jikalau kita select all form user dapat data prawito dengan data seperti ini kemudian kita akan coba hit ulang di sini di FPI kita kita klik send Nah sekarang kita sudah dapat datanya ya ID 1 prawito dan seterusnya ini menandakan koneksi kita telah berhasil dari Express ke MySQL kita setelah kita berhasil melakukan koneksi ke database my SQL kita selanjutnya kita akan merapikan koneksi database ini sesuai dengan struktur folder yang kita miliki Nah kita akan pindahkan nih MySQL ini dengan double kita akan cut kita pindahkan ke folder config di sini kita akan buat file baru dengan nama database ya Nah kita paste di sini nah saya sekarang memiliki konfigurasi databasenya kita buat DB full kemudian kita akan export modul export Nah di sini karena DB pool ini bersifat asinkronus berarti cara ekspornya adalah DB pool.cromis seperti ini setelah kita menyimpan konfigurasinya selanjutnya ini kita hapus untuk pemanggilan query seperti ini saya tidak akan sarankan langsung di dalam controllernya tapi saya akan membuat di dalam sebuah model Nah model di sini biasanya saya akan buat sesuai dengan nama table yang saya miliki contoh tadi saya memiliki nama table users berarti di sini saya akan buatkan juga nama filenya users.cs Nah di sini sebuah function biasa saja contoh kita memiliki function untuk get all users Nah di sini funset ini untuk melakukan query nah cara querynya gimana kurang lebih seperti ini seperti yang tadi DB full execute dan seterusnya DB full berarti diimport dari mana Nah kita import untuk DB pool itu dari config database Nah sekarang kita sudah import DB punya kemudian karena nanti yang menggunakannya ini bukan secara langsung model di sini berarti saya akan perbaiki ini menjadi return sesuatu apa yang jadi adalah DB pool ini tetapi sebelum di return saya akan Coba perbaiki dulu biasanya untuk query ini saya buat sebuah variabel namanya SQL query Nah baru querynya di sini masukkan ke sini SQL query Nah karena saya tidak langsung menggunakannya berarti saya tidak butuh callback follbacknya saya hapus seperti ini Nah baru inilah yang saya Return nah seperti ini sekarang saya sudah memiliki satu model untuk mendapatkan semua users Kalau sudah tinggal di export seperti biasa ekspornya dalam bentuk objek yaitu get all users sekarang saya menuju ke tempat yang menggunakan yaitu controller sebelumnya kita remove dulu di sini yang tidak kita gunakan kita masuk ke controller di sini Nah kita akan masuk ke fungsi get all users dimana kalau kita lihat roots ketika kita get users kita akan masuk ke controller get all users tadinya kita menggunakan dummy data ini Nah sekarang ini akan kita remove kita akan ganti dengan pemanggilan ke database berarti kita perlu mengimport model tadi kita buat user model yang diimport dari file model dan user setelah dapat user modelnya di sini saya akan simpan dia di dalam data yang akan saya panggil dari user model dot get all users nah seperti ini perlu diingat pemanggilan ke database itu bersifat asinkronus untuk mendapatkan valuenya berarti harus kita tunggu dulu yaitu kita awet di sini kalau kita awet berarti ini bersifat asing Cronus nah seperti ini kalau sudah kita akan dapat datanya di sini nah sekarang kita akan coba call ke users ya users dengan metode get kita send Nah kita dapat datanya nih Nah tapi kalau kita lihat datanya kok seperti ini ya yang pertama ada data user yang kita perlukan Betul tapi yang kedua kita ada data Fields nya nah ini menjadi dua Rey ini satu Rey usernya kemudian ini fields-nya nah gimana cara memperbaikinya nah ini sebenarnya bisa kita desert sering Artinya kita buat menjadi array ini kan sama seperti callback tadi sebelumnya ada Rose ada Fields seperti ini hanya saja yang saya gunakan hanya rumusnya saja fieldnya tidak saya pakai berarti ini fieldnya saya remove Sisakan rosenya Nah karena penamaan rous ini kurang begitu enak saya ganti menjadi data berarti bisa di desa kering seperti ini kalau kita simpan sekarang kita send lagi nah dapatlah data sesuai dengan yang kita harapkan Nah sekarang kita sudah berhasil mengambil data dari database namun perlu diingat ketika kita mengkoneksikan ke database sewaktu-waktu bisa terjadi error ambil sampel kalau di modelnya saya rubah ini di sini select all from usersnya banyak seperti ini kan nggak ada tuh tablenya Jadi kalau pas saya seperti ini saya send dia akan terus sanding request tidak berhenti Nah kita akan lihat errornya ternyata ada error di dalam Terminal kita hanya saja tidak terbaca Nah ini bisa kita perbaiki di sini ketika pemanggilan ke database itu sebaiknya kita Panggil dengan fungsi try catch jadinya yang ekspektasi suksesnya kita simpan di tray kemudian kalau ternyata terjadi error kita akan berikan informasi ke user respon.jesen kita kabari errornya server error misalnya nah kemudian server error itu kan biasanya status quotenya 500 ya kita buat 500 nah message server error kemudian selain daripada message kita juga perlu ngasih tahu server message-nya artinya error dari sisi servernya apa sih ini kita kembalikan error dari cache-nya Nah kalau kita simpan kemudian kita hit lagi di sini nah barulah sekarang kita kita tahu nih statusnya 500 berarti terjadi server error Nah ada server message juga bisa kita baca errornya apa sih table Express users does berarti memang ada kesalahan di sini nih di proses SQL nya berarti kita perbaiki kita perbaiki lagi di sini kita simpan sekarang kalau kita hit kembali dia sukses memberikan datanya kemudian sekarang kita sudah memiliki struktur yang rapi untuk pemanggilan ke database Nah jadi kalau saya recap sekarang kita memiliki config file untuk mengkoneksikan ke database kemudian saya memiliki modelsnya untuk melakukan query ke dalam database lalu barulah digunakan di controllernya dan jangan sampai lupa ketika kita melakukan proses koneksi database untuk bisa meng-capture errornya jika terjadi permasalahan dengan database kita selanjutnya untuk membuat Project kita semakin baik lagi kita akan coba Set up environment nya Nah di sini apa sih environment variabel environment variabel itu sederhananya adalah kita membuat sebuah variabel untuk setiap environment yang kita inginkan contoh ketika di local laptop kita kita mempunyai environment lokal kemudian ketika production kita juga punya environment production tujuannya adalah kita akan menyimpan data-data yang bersifat mungkin rahasia di dalam environment variabel ini karena variabel ini tidak bisa diakses oleh user dari sisi cliennya sehingga ini lebih aman kita simpan di dalam variabel dan biasanya juga tidak kita komit ke dalam repository sehingga ini membuat data rahasia kita lebih aman kita simpan Nah untuk membuat variabel pertama kita perlu menginstal sebuah package Nah di sini kita menggunakan package Kemudian untuk installnya sama saja seperti pada umumnya Nah kita buka Terminal Ian add Nah setelah selesai kita masukkan konfigurasinya konfigurasinya cukup seperti ini dan ini kita simpan di dalam file utamanya selanjutnya tinggal bisa kita pakai saja pemakaiannya seperti ini kurang lebih dan cara menulis environment Biasanya seperti ini dengan menggunakan huruf kapital semuanya Oke kita akan masukkan di dalam file index di sini Oke kita minimize dulu untuk terminalnya selanjutnya kita akan membuat file dot Inv Nah dengan memiliki dot MV ini kita akan menyimpan semua data secretnya di sini contoh yang pertama mungkin kita akan menyimpan portnya portnya akan kita buat dinamis dari NV port = A3 kita masukkan di sini kemudian yang akan kita simpan lagi adalah di database di sini nah ini tidak bagus ya kita simpan langsung di codingan seperti ini karena ini bisa disimpan ke dalam repository ini kurang bagus ini akan kita pindahkan semuanya ke Inv pertama DB host kita simpan kemudian DB username kemudian DB password dan terakhir databasenya DB password kemudian DB name nah Biasanya seperti ini passwordnya Bukan ini ya passwordnya root Oke selain itu kita bisa menyimpan yang lainnya mungkin seperti token Google atau yang lainnya untuk sementara kita butuh ini dulu kemudian Cara pakainya kita langsung pakai saja di sini contohnya kita membuat variabel Nah di sini aja biar rapi kita akan buat consport sama dengan proses nah variabel di NT nya contoh port di sini Nah berarti tinggal kita pakai seperti ini kalau semisal tidak terbaca kita akan set default di 4000 atau di 5000 deh supaya beda Nah kita simpan kemudian ini port kita ganti jadi port nah ini kita buat dinamis Nah akhirnya kita ganti jadi seperti ini kemudian kita ganti menjadi port Oke kalau sudah kita simpan untuk portnya kemudian yang databasenya kita ganti juga ini kita ganti jadi proses.inv.db apa tadi host kemudian yang lainnya kita ganti juga ini DB username DB password terakhir DB name Nah sekarang kita sudah memiliki data-data kredensial yang lebih aman kita simpan di dot env setelah itu Coba kita running Nah kita bisa melihat nih server berhasil di Running di port 4000 kalau kita lihat di sini port 4000 itu berdasarkan konsol yang ada di bawah sini port 4000 port-nya ambil dari Inv berarti NV kita sudah berjalan Nah selanjutnya untuk memastikan env ini nggak kekirim ke git kita akan masukkan ini ke git ignore .inv ini tidak boleh masuk ke dalam Git atau repository kita oke nah biasanya yang masuk ke dalam repository itu kita buat sampelnya example nah seperti ini kalau ini boleh kita masukkan ke dalam seperti ini karena ini hanya sampel saja kemudian ini kita isi bebas supaya aman seperti ini biar mereka mengisi ya kalau yang memerlukan seperti ini baru inilah yang disimpan ke dalam repository Inv xample baik kalau sudah kita akan coba di Postman apakah masih berjalan dengan baik atau tidak Nah kita akan coba dengan metode yang sebelumnya kita coba hit Oke dan kita dapat datanya get all user success datanya kita temukan Berarti sekarang konfigurasinya sudah menggunakan IMP kemudian kita menggunakan IMP ini sebagai tempat menyimpan data-data Secret kita supaya lebih aman selanjutnya kita akan mengimplementasikan materi crew yang Static sebelumnya dan kita akan ganti menggunakan MySQL Nah kalau kita masuk ke dalam roots kita sudah memiliki crowdenya di sini dan kita akan mulai ganti satu persatu dimulai dari Create new user nah saat ini create user masih bersifat dummy dia belum menyimpan apapun ke dalam database kita akan coba Simpan ke dalam database Nah untuk memulai itu kita akan membuat model terlebih dahulu untuk menyimpannya ke dalam asql Nah kita buat di model di sini yang baru kita miliki baru model untuk get all user Nah kita akan bersimpan model baru mungkin Create new user nama modelnya oke di sini ngapain sama kita akan membuat SQL query nah bedanya SQL query kali ini untuk menyimpan data ke MySQL berarti Insert into akan kita simpan kemana tabelnya tabel users Apa yang akan kita Insert kolomnya kita sebutkan ada kolom kalau kita lihat ke MySQL kita punya kolom name email dan juga dress ID kita Biarkan saja karena dia auto increment dan juga primary berarti di sini ada name ada email dan juga ada address ya kalau sudah kita isi dengan value apa 6 value ini bersesuaian dengan urutan yang kita tulis di sini kalau name berarti saya mau namenya apa di sini pakai string ya jangan sampai lupa contoh namenya Zami Mungkin gitu seperti ini nah ini ada error karena sama-sama petik ya ini kita ganti jadi backtik kita ganti jadi backpack seperti ini Oke ini ada Azami kemudian emailnya @gmail.com kemudian addressnya ada di Jakarta contohnya Nah kita sudah punya pola untuk menyimpan ke MySQL Nah kita rapihkan supaya enak dilihat valuenya kita Enter saja insertnya kita tap biar lurus Nah nanti value yang kita buat di sini ini akan kita kirimkan dari request body berarti kita nanti akan memerlukan request body di sini Nah di sini akan kita ambil valuenya dari body dot name contohnya kemudian ini didapatkan dari body.email ya body dot email yang terakhir di sini kita dapatkan dari Nah kita sudah memiliki data yang dinamis dari request body yang dikirimkan user selanjutnya sama seperti sebelumnya di sini tinggal kita return saja DB pool execute SQL query nah mudah sekali yang penting kita paham tentang query di MySQL untuk eksekusi functionnya sangat mudah jangan lupa ini kita export juga Nah kalau sudah kita simpan dan kembali ke dalam controller yang kita perlukan nah di Create new user ini Nah kita akan dapat body kan ya kita dapat katakan body payload dapatkan dari request dot body atau mungkin kalau mau di setting juga boleh tidak dapat body dari request nah seperti ini juga bisa kemudian kita akan Panggil try Kenapa tray catch karena kita akan melakukan call ke database Jadi kalau ada error kita bisa simpan dia di dalam cache dan kita balikan error ke usernya nah yang dilakukan di tray ini kita akan awet kita akan tunggu kemudian kita akan Panggil user model ya kita Create new userna kita Panggil fungsi atau model yang tadi kita buat model yang kita buat tadi butuh body nah bodynya masukin ke sini yang mana body itu ada name ada email dan juga address setelah itu layar sampai lupa ini awet berarti kita tambahkan asing di sini ya Oke kalau sudah request bodynya bisa kita hapus kemudian try catch Nah kalau berhasil yang ini kita pindahkan ke atas kalau berhasil rest dot Jason create user success kemudian kita kirimkan request bodynya atau bodynya saja kita kirimkan kalau gagal kita akan kirimkan sama seperti sebelumnya nah ini les.statusnya kita bikin 500 server error kita memunculkan errornya Kenapa Nah kalau ini menyimpannya gagal kita coba Simpan Dan kita akan coba ya Nah kita coba di Postman kita buat datanya Azami kemudian Ini ganti juga tinggalnya di Semarang mungkin ya kita akan coba hit Create new user success apa yang disimpan Azami kemudian addressnya ini kita lihat di MySQL databasenya nah ternyata kesimpan ya hazami
[email protected] kemudian addressnya di tengah di Semarang Nah untuk id-nya dia auto increment Kenapa mulai dari 4 karena tadi saya sebelumnya coba-coba terlebih dahulu akhirnya dimulai dari 4 untuk data yang kedua kita coba sampel yang lain tinggalnya di Aceh kita hit lagi send gridnya user success Nah kita coba query lagi di sini nah kita dapat datanya
[email protected] Oke berarti Create new user ke dalam hsql sudah berhasil baik selanjutnya kita akan implementasi untuk read dan update Nah kalau kita lihat untuk read ini sudah kita implementasikan di materi sebelumnya sehingga mungkin ini kita skip untuk screen-nya karena sudah ada nah kita akan lanjut untuk updatenya ya update ini untuk patch di sini kita belum punya untuk modelnya jadi kita masuk dulu ke controller Nah kalau kita lihat di update user kita belum punya model untuk mengupdate datanya di dalam table sekarang kita buat dulu modelnya Nah mungkin kita buat di sini cons update user sama yang diperlukan juga pasti akan ada body nah selain body kita juga perlu ID user Nah jadi nanti akan mengirimkan dua parameter ya Nah di sini ngapain sama kita buat SQL query SQL query untuk update itu adalah update nama tablenya update users kemudian kita set Nah apa yang mau di update Nah contoh Saya mau mengupdate name valuenya apa Nah contohnya hudoro mungkin seperti ini kemudian apalagi tambahin koma ya contoh saya mengupdate juga emailnya emailnya saya ganti jadi
[email protected] kemudian addressnya saya ganti jadi Yogyakarta nah seperti ini tambahkan where were itu untuk mencari Siapa yang mau di update Nah kita spesifikasi id-nya where ID sama dengan Nah karena dia integer kita boleh masukkan langsung id-nya Berapa satu contohnya seperti ini Nah kita enter dulu biar rapi biar enak bacanya kemudian setnya juga kita enter nah seperti ini nah ini update user set apa aja yang diganti namenya Emailnya sama dressnya kemudian where apa where ID = 1 Oke Jakartanya kurang petik ya kita siapkan dulu petiknya kemudian ini kita hapus petiknya Oke kita mulai dengan mengganti dummy ini menggunakan body request body dari usernya ya kita akan ganti dia jadi body.me ini juga sama kita ganti jadi body.email terakhir kita ganti body dot address sudah setelah kita ganti ini selanjutnya id-nya yang kita ganti where ID = ID user Nah jadi sekarang kita sudah memiliki skill querynya sama selanjutnya tinggal return saja DB Pool SQL query Semuanya sama kecuali querynya saja Nah kalau sudah seperti ini kita akan kembali lagi Oh jangan lupa di export ya dieksport kemudian kita kembali lagi ke controllernya di update Ini sama juga kita akan menyiapkan count bodynya diambil dari request Nah selanjutnya kita akan try cat juga sama kemudian kita lakukan await lagi yang kita Panggil dari user model dot update user Nah di sini jangan lupa kita kirimkan body dan juga HID usernya nah ini karena with jangan lupa tambahkan asing nah selesai kalau berhasil kita masukkan ini nah datanya request bodynya kita kembalikan ke dalam atau ke usernya kita balikan Nah kalau kita mau memasukkan ID usernya boleh juga ini kita ganti jadi objek seperti ini contohnya kita masukkan ID = ID user seperti ini koma body bodynya kita spread supaya muncul semuanya id email name dan seterusnya Oke update user success kalau error sama seperti sebelumnya kita copy saja yang ini Nah kalau sudah masukkan ke sini konsolnya kita hapus sudah kita akan coba kita simpan masuk ke update user kita coba di Postman ya nah ini hampir sama dengan ini kita duplikat saja kita ganti methodnya jadi patch kemudian bodynya nah ini kita akan sasar ID yang mana kita contoh mau update yang prawita nih id-nya 1 kemudian kita ganti namanya jadi prawita hudoro namenya juga kita perbaiki address juga kita ganti Nah di sini user Slice id-nya 1 kemudian ini kita ganti jadi rawitter hudoro ini kita ganti juga emailnya terakhir lokasinya kita ganti jadi Yogyakarta Oke kalau sudah coba kita send update user success ID yang dirubah Ini namanya jadi yang ini yang terbaru kita lihat di sini kita enter querynya Nah sekarang sudah berubah ID 1 perawi itu dulu ID emailnya berubah addressnya juga berubah demikian proses update user berhasil kita lakukan Nah untuk yang terakhir kita akan coba untuk melakukan delete di dalam database MySQL kita Nah kita masuk ke controller sama kita cek di sini deletenya belum melakukan eksekusi ke dalam database sehingga kita perlu membuat modelnya dulu Nah mungkin ini kita akan buat function namanya delete user ya Nah kalau di delete user ini yang kita perlukan hanya ID user berarti kita siapkan id usernya functionnya kemudian sama kita buat sqlqerry kalau sqery untuk delete itu mudah saja Tinggal kita lakukan di LED from nama tabelnya apa users where ID = ID user nah seperti ini aja cukup kemudian lanjut ke Return SQL query jangan lupa di export juga delete user Nah kita sudah punya sekarang untuk delete usernya tinggal kita pakai di controllernya sini sama di sini kita akan buat Cry cat juga di dalam try-nya kita akan Panggil awet user model dot delete user kemudian kita kirimkan ID usernya seperti ini awet Jangan lupa kita sandingkan dengan asing ya kalau sudah kalau berhasil nah dia akan kirim ini Nah kalau berhasil akan kirim ini biasanya kalau dilihat itu tidak mengirimkan data apapun ya jadi datanya kosong kita kosongkan saja ini 0 aja Oke kalau sudah kalau error juga sama kita akan kirimkan ini statusnya 500 Oke kalau sudah kita simpan dan kita coba ya Nah kita akan coba remove untuk jondunya yang id-nya 5 hampir sama dengan patch kita akan duplikat saja ID nya kita ganti jadi 5 kemudian bodynya kita kosongkan saja Kalian tidak perlu body selanjutnya tinggal kita hit saja patch of Sorry methodnya jangan patch tapi delete nah delete kemudian kita send delete user success kita lihat isql nya kita running lagi datanya sekarang tinggal 2 ya kalau itu dan Azami Nah ini bisa kita delete lagi kalau kita mau Nah di sini sekarang untuk fungsi deletenya sudah berhasil Berarti sekarang kita sudah mengimplementasikan crude sederhana kita dan implementasikan ke dalam MySQL databasenya Setelah mempelajari implementasi crude ini teman-teman bisa mengimplementasikannya sesuai dengan kebutuhannya masing-masing implementasi crude ini akan banyak sekali contohnya kita bisa membuat sign in atau sign up dengan metode crude ini mungkin untuk sign up kita bisa create user atau kita juga bisa membuat list produk juga bisa menggunakan metode crude ini jadi basic root ini harapannya teman-teman bisa pahami dengan baik sehingga bisa diimplementasikan dalam kebutuhan Project teman-teman semua Sekarang kita akan mempelajari tentang http status quote nah ketika kita membuat sebuah Res FPI yang tentunya dikonsum oleh customer yang begitu banyak maka kita perlu memiliki standar untuk memberikan respon kepada user nah ketika mereka mengheat FPI kita kita perlu menggunakan informasi berupa status quote supaya mereka tahu apa yang terjadi dengan fpinya Apakah dia sukses ataukah ada error kesalahan di dalam usernya inputnya ataukah ada servernya yang bermasalah nah biasanya http satu Squad yang sering saya gunakan semua saya Tuliskan di dalam sini yang pertama sukses full response artinya ketika user melakukan call kepada FPI kita kita bisa memberikan informasi bahwa Core fpi-nya sukses responnya sukses yang biasa saya gunakan ada dua yaitu status quotenya 200 artinya oke ini biasanya digunakan untuk gate dan juga patch kemudian selanjutnya 201 artinya kritik artinya ada data baru yang dibuat nah ini biasanya saya gunakan untuk pos dan juga Put selain success ada juga https code yang client error artinya memang kesalahannya berada pada client nah ini biasanya dimulai dari angka 4 depannya kalau dia 400 biasanya batrequest Nah batrequest itu apa biasanya ada kesalahan nih usernya mengirimkan contoh kita butuhnya datanya email name dan juga dress mereka tidak mengirimkan data dari ketiga ini mereka mungkin malah mengirimkan Birthday atau mungkin gender dan lainnya sedangkan yang require seperti name email dan address tidak mereka kirimkan maka kita akan kabarin mereka dengan 400 Selain itu ada 401 nah 401 ini kalau kita sudah mulai menggunakan autotication ya untuk aplikasi kita jadi user harus login dulu ke aplikasi kita Nah kalau mereka mengakses FPI kita namun mereka belum login itu berarti mereka UN authenticated Artinya mereka tidak diizinkan masuk mereka harus login dulu nah biasanya saya ngabarin dengan 401 Artinya mereka outer rice tidak boleh masuk ke dalam FPI tersebut Nah kalau mereka sudah masuk memasukkan passwordnya dan diizinkan masuk biasanya ada juga error Respon yang lain contohnya 403 Nah kalau 403 ini artinya Forbidden nah Forbidden ini berarti dia sudah login auticated tapi dia tidak diizinkan untuk karena roll-nya role-nya memang tidak diizinkan untuk akses Nah itu 403 artinya Forbidden tetap tidak diizinkan masuk ke area tersebut kemudian ada juga 404 nah ini sering kita lihat artinya Dia mengakses FPI yang salah jadi FPI tersebut memang tidak ada atau not found yang selanjutnya 405 method not low nah ini biasanya untuk beberapa method yang kita tidak izinkan contoh untuk mengakses flash user kita hanya menyediakan method get post atau patch dan Delete nah mereka memberikan metode yang lainnya maka kita akan bisa mengirimkan 405 yaitu metode low nah yang terakhir biasanya ada error respon berupa server error respon biasanya dimulai dengan angka 5 depannya Nah kalau 500 itu biasanya saya sebut dengan Internal server error nah selain daripada ini semua Sebenarnya masih banyak sekali status quote di dalam http tersebut Nah teman-teman bisa mengakses url yang saya sediakan di sini untuk melihat lebih detailnya lagi nah namun yang sering saya gunakan kurang lebih ada sebanyak ini untuk status quote saya pun menyimpan catatan ini semua di dalam codingan di sini dalam file http statusku.md Nah teman-teman bisa menggunakannya atau bisa mengcopy file ini dan bisa simpan di Project fpinya sehingga kalau suatu saat lupa bisa melihat kembali http status code-nya Nah selanjutnya kita juga bisa memperbaiki beberapa Respon yang kita miliki yang sudah kita buat contoh di dalam create user Nah di sini kita lihat kita selalu kalau sukses itu rest dot Jason saja Padahal kita bisa mengirimkan status kode yang spesifik kalau seperti ini pastinya responnya 200 Nah kita coba untuk post ke users contohnya kita buat data baru John kemudian emailnya juga John tinggal di Aceh kalau kita send nah dia berhasil Tapi status quotenya 200 nah ini tidak diharapkan Kenapa tidak diharapkan karena ini metodenya Post dan dia membuat data baru baiknya 201 Nah ini bisa kita ganti dengan rest.status Nah kita kirimkan 201 jadi user lebih mengerti lagi bahwa ini data baru dibuat kita simpan kita ganti data yang lainnya nah ini kita send Nah klik user success dan sekarang status quotenya 200 dan dia berubah jadi credit artinya ada sesuatu yang di create selain itu kita juga bisa merubah yang lainnya contoh untuk gap all user karena ini berhasil boleh kita biarkan Resort Jason artinya dia nanti akan mengirimkan 200 secara otomatis kemudian kalau untuk delete biasanya saya juga gunakan 200 karena artinya dia oke dan kita tidak mengirimkan data apapun ke usernya Nah selanjutnya kalau semisal ada inputnya yang keliru contoh di Create new user ini nah contoh saya akan menambahkan validasi jika body dot email tidak ada nah ini bisa seperti ini atau body.name juga tidak ada pakai negasi di depannya or body dot address nggak ada nah ini akan saya Return respon dot status 400 artinya bed request jadi dia mengirimkan data yang keliru harus ada semuanya emailnya ada namenya ada addressnya ada kemudian kita kasih Jason message nya mungkin Anda mengirimkan data yang salah nah seperti ini kemudian datanya kita bisa buat 0 seperti ini ini sampel saja kita memberikan status error jadi kalau dia tidak mengirimkan data ini akan kita balikan sebenarnya proses untuk validasi ini ada versi mudahnya dengan menggunakan middle ware tapi untuk sementara kita buat seperti ini Nah kita coba di Postman kita hilangkan salah satu address contohnya Nah kalau ini kita hit nah ini ada 400 bed request artinya ada sesuatu yang salah kita kirimkan Anda mengirimkan data yang salah nah nanti dengan penambahan logic atau pengecekan request kita ini bisa kita kasih informasi bahwa apa Data yang nggak ada apa Data yang harusnya diperlukan tapi tidak dikirimkan itu kita bisa masukkan ke dalam informasi message-nya nah sekarang dengan seperti ini kita sudah bisa mengirimkan status code sesuai dengan kepentingannya masing-masing kali ini kita akan mempelajari tentang workspace dan juga collection di dalam Postman Nah kita sudah banyak menggunakan Postman sebagai tools untuk mempermudah kita melakukan testing di rest FPI yang kita buat Nah kalau kita lihat di dalam Postman ini hal yang sering saya gunakan adalah pertama di sini kita bisa memiliki workspace itu artinya adalah tempat kerja dimana kita bisa menggrouping tempat-tempat kerja untuk tes FPI kita contoh disini spesifik untuk latihan saya buat workspace namanya training tapi untuk kerjaan inti Saya biasanya ada di my work space Kita juga bisa membuat Mungkin ada satu workspace lagi untuk spesifik untuk kantor tempat kita bekerja Nah itu bisa kita buat juga di workspace Nah di sini saya sudah memiliki WordPress training kemudian di dalam workspace training ini kita bisa memiliki banyak kumpulan FPI nah salah satunya adalah FPI yang kita buat di dalam materi express my SQL ini Nah kita bisa buat collection Nah kita create collection Nah kita buat nama collectionnya Apa contohnya Ini tutorial express my SQL seperti ini saya punya collection baru tutorial SQL pertama kemudian kita simpanlah semua endpoint yang kita buat dari mulai createnya Nah di sini kita bisa simpan kita save mungkin request name namanya apa mungkin seperti ini create user kemudian ini akan kita simpan ke tutorial My X tutorial express my SQL kemudian kita simpan Nah kita sudah ada nih satu create user atau mungkin bisa kita rename namanya cukup besar kecil saja ya create user seperti ini supaya rapi Nah selanjutnya gatenya juga ada nih kita simpan juga Berikan nama get all user nah ini kita simpan di tutorial express my SQL save juga kita sudah kumpulkan nih ada semua updatenya kita simpan juga update user kita simpan terakhir delete nya juga sama kita simpan delete user Nah sekarang kita sudah memiliki kumpulan endpoint yang kita miliki ini kita user get Al user Dan lain-lainnya Dan ini semua bisa kita grouping lagi dengan cara kita buat add folder nah ini khusus untuk kita rename ya user contohnya Nah sekarang kita bisa pindahkan nih semua endpoint kita ke dalam folder user jadi kalau kita nanti punya yang lainnya contoh mungkin nanti kita punya folder lain mungkin produk atau mungkin sales nah seperti ini ini bisa dibuat sesuai dengan routingnya jadi lebih mudah untuk mencarinya Nah di sini karena saya baru memiliki user saja Berarti kita masukkan ke dalam folder user kemudian semua endpoin ada di sini Nah nanti semua collection ini bisa kita bagikan dengan teman-teman satu tim kita sehingga mudah untuk mengaksesnya kita bisa invite teman kita di sini untuk mempermudah kolaborasi menggunakan rest FPI kita demikian materi tentang work space dan juga collection di dalam Postman ketika kita membuat sebuah race FBI ada kalanya kita perlu mengirimkan sebuah data berupa files untuk user kita contoh kita ingin mengirimkan file image supaya bisa diakses oleh user Ataupun mungkin file PDF nah gimana caranya supaya user bisa mengakses file di dalam rest FPI kita Nah kita ambil contoh di dalam src ini kita akan atau di luar src ini kita akan membuat sebuah folder mungkin bernama public semua files yang ada di dalam folder public ini saya harapkan bisa diakses oleh user Nah kita coba akan masukkan sebuah image ke dalam public ini Nah di sini saya sudah memiliki file image logo hsd di sini berupa file PNG Nah sekarang gimana caranya kalau melalui browser kita bisa mengakses image ini Nah kalau kita coba di sini katakan kita buat satu url baru katakan http locallos 4 000 kemudian kita Panggil langsung di sini mungkin supaya mudah manggilnya kita rename saja menjadi logo strip hsd Ya seperti ini kita coba panggil dengan logo hsd Nah kita enter ini not found dia tidak bisa ditemukan logo hsd.png padahal ada filenya Gimana cara mengaksesnya nah dalam Express kita bisa membuat yang namanya Static file caranya adalah kita masuk ke dalam indeks kita kemudian kita akan membuat middle were sama kita buat Fuse kemudian kita Panggil Express kemudian kita masukkan di mana folder tersebut berada foldernya ada di dalam folder public berarti kita masukkan publik nah seperti ini kita simpan Nah sekarang karena si publik ini sudah kita buat jadi statik dia bisa diakses oleh user dengan memanggil file yang ada di dalamnya seperti ini kita send Nah sekarang imagenya sudah bisa diakses dengan memanggil file di dalamnya Nah sekarang bagaimana kalau semisal Saya grouping lagi di sini saya bikin folder lagi di magisk jadi semua image saya masukkan ke sini saya pindahkan imagenya ke dalam folder image Nah berarti ini harus kita perbaiki menjadi publik garis miring di magisk kita simpan ini sama saja kalau kita akses kita send nah ini juga masih tetap bisa diakses di dalam URL logo strip hsd nah supaya lebih baik lagi supaya lebih rapi Saya ingin sebelum masuk ke dalam filenya saya akan membuat sebuah nama routing contohnya image seperti itu atau aset juga boleh kita akan memberikan nama sebelum nama filenya Nah itu bisa kita buat juga dengan kita berikan nama url nya di sini Nah kita buat nama contoh mau slash asset boleh seperti ini nah artinya sekarang kalau saya memanggil image logo HST tidak bisa lagi seperti ini Nah kalau seperti ini akan not found tapi kalau kita tambahkan aset garis miring logo hsd Nah sekarang dia bisa diakses dengan menambahkan root aset sekarang kita sudah memiliki routing asset di dalamnya bisa mengakses Static file di dalam public image teman-teman bisa mengolah semua keperluan Static ini untuk bisa diakses oleh user teman-teman semua setelah kita bisa membaca filestatik di dalam FPI kita selanjutnya kita akan mempelajari bagaimana cara mengupload file ke dalam Project Crash FPI kita Nah untuk melakukan proses upload kita akan menggunakan package bernama mother mother ini akan membantu kita untuk meng-handle multipat home data yang biasanya digunakan untuk upload file dia akan bisa membacanya dan bisa membantu meng-handle proses upload kita Nah di sini pertama kita akan install dulu malternya kita buka terminal Nah setelah alternator install kita jalankan juga servernya kita minimize kita akan membuat middle where untuk menghandle proses penerimaan image tersebut Nah middler itu akan kita simpan di folder mid ini kita beri nama molter ya kemudian Apa yang dilakukan di sini pertama kita akan buat variabel malter yang kita import dari malter Nah selanjutnya kita akan menentukan dimana kita menyimpan file yang akan kita upload kita sebut dengan storage nah ini kita Panggil malted dot di storage pertama kita tentukan destinasinya jadi akan disimpan di mana file tersebut nah di Destination ini berupa function yang menerima request file dan juga callback Nah di sini Kita akan menggunakan callbacknya Jadi kalau callbacknya dengan error 0 artinya dia tidak error kemudian kita tentukan Di mana letak folder untuk menyimpannya saya akan menyimpannya di folder public flash imagisk ya dari kumpulkan semua di sini karena saya akan berencana mengupload image kemudian setelah itu kita tentukan file name nya nah file name juga sama dia memiliki request file dan callback Nah kita gunakan sama juga follbacknya dengan errornya 0 Nah di sini Kita tentukan nama filenya nama filenya itu biasanya kan kayak gini testing.png perlu diingat kita perlu menambahkan extension di dalam nama file tersebut Nah kalau saya biasanya format untuk nama file ketika upload itu biasanya ada Time nama file yang diupload dari usernya kemudian extensionnya nah cara membuat ini gimana kita coba buat variabel pertama membuat time Stamp nah time itu saya buat dengan New date kemudian get time nah ini dapat time Stamp dengan menggunakan javascript kemudian nama file Ini testing ini didapat dari mana ini didapat dari file name dapatnya dari file dot file name nah ini akan mendapatkan nama file yang diupload oleh si user kemudian terakhir kita dapatkan extension dapat dari mana itu dapat dari extensionnya si file ini Nah untuk dapat itu kita perlu sebuah package kita import yang require dari Path ya kita bisa menggunakan Path ini nah kemudian kita akan ekstrak Path extension extension name dari file original name Nah maksudnya di sini adalah dari file originalnya biasanya kan seperti contoh logo hs.png itu kan original namenya di belakangnya ada dot PNG dengan path.xtension name ini dia akan ambil extensionnya saja Oke kita dapat 3 bagian yang kita perlukan sehingga ini akan kita ganti dengan back tick kemudian yang pertama adalah Time kemudian Strip Saya biasanya pakai strip kemudian ada file name setelah file name baru extension extension nah seperti ini ini untuk file name saya ketika menyimpan untuk upload sebuah file selanjutnya Setelah itu kita siapkan function uploadnya uploadnya itu caranya adalah malter kita ambil storage yang disimpan dari konfigurasi Store di sini nah seperti ini jadi molter kemudian konfliknya kita ambil dari sini Mater di Story kalau sudah kita export export sama dengan upload Nah kita simpan Nah sudah kita siapkan middle where nya tinggal kita gunakan di sini Nah di sini untuk menggunakannya saya akan membuat sebuah Pet baru yaitu dengan metode pos petnya mengarah ke upload nah seperti ini upload kemudian kita buat sama request respon kemudian function Nah nanti kalau berhasil di sini saya bikin respon dot Jason dengan WC upload berhasil nah seperti ini nah di mana kita menggunakan middle were malter tersebut Nah kita gunakan di sini kalau kita ingin menggunakan middle ware untuk keseluruhan aplikasi kan digunakannya di sini ini middler yang digunakan di keseluruhan aplikasi Kita juga bisa menggunakan middle ware spesifik di sebuah Path dimana tempatnya Anda setelah kita menuliskan Pathnya baru di sini kita masukkan middlernya kita tambahkan koma di sini Nah berarti ini kita bisa pasang middle where nya di sini middler akan kita gunakan adalah malter ya tadi yang upload tadi upload yang diimport dari middle were malter nah ini nama functionnya upload kemudian di sini saya akan mengupload sebuah file berarti kita pakai single karena di motor itu kita bisa mengupload lebih dari satu ya bisa single juga bisa lebih dari satu false kemudian ketika upload nanti properti multi platform datanya apa kita ingin memberikan nama propertinya foto Nah kalau sudah seperti ini kita simpan Nah sekarang kita coba upload ya kita masuk ke Postman kita buka tab baru metode kita ganti jadi Pos kemudian ini kita Arahkan 4000 upload nah seperti ini kemudian jangan lupa karena ini metode pos kita ingin upload foto dengan form data ya kita jangan lupa pilih form data kemudian Q nya Nah ini sesuai dengan yang kita tentukan di sini nah akinya berarti harus foto foto nah ini Q nya ini tipenya jangan teks tapi file sehingga kita bisa select filenya kemudian kita pilih file yang akan kita upload nah katakan uploadnya ini file PNG ini kita upload kalau sudah kita send nah upload berhasil kalau kita lihat kita sudah dapat filenya di sini nah ada time kemudian Oh andifine.png nama file name-nya tidak ketemu ya ini andifine ini perlu kita perbaiki nah coba kita konsol dulu di sini biar kita tahu isinya apa aja kita konsol file ya kita coba sen sekali lagi Nah kita lihat konsolnya Oh original name Oh tapi dia ada dot png-nya ya Nah kalau gitu kita bisa ganti saja dengan original name saja langsung di sini nah ini kita bisa ganti original name file dot original name Nah berarti ini extension name extension tidak diperlukan lagi karena format penulisan namanya cukup seperti ini original name Oke Nah ekstensinya sudah tidak perlukan Karena dia sudah ada dot PNG nya Oke kita simpan sekali lagi kita sembunyikan untuk terminalnya kita post success dan kita dapat time dengan nama yang sesuai ya logo hsd.png Nah sekarang kita sudah bisa mengupload image dengan format nama terserah kita kita bisa mengatur format nama yang kita inginkan Nah selanjutnya Selain Kita bisa mengupload sebuah gambar ataupun file kita bisa memberikan limit atau memberikan sebuah batasan karena kalau orang upload dia bisa upload sebesar-besarnya nah saya ingin membatasi supaya uploadnya tidak terlalu besar Nah berarti di sini kita bisa Tambahkan lagi nih Nah koma kita kasih limit apa yang mau kita limit pertama kita limit file sizenya saja nah file size saya akan limit katakan hanya 3MB 3MB itu 3 dikalikan nah satu KB itu kan 1000 bait ya ini satu ini kalau ini tiga KB nah kemudian kalau 3MB berarti kalikannya seperti ini 3MB ya Oke 3MB kemudian kalau sudah kita limit user tidak bisa mengupload lebih dari 3 MB Nah nanti kalau kita akan coba kalau kita upload lebih dari 3MB seperti apa Nah kita coba ganti filenya kita select file Nah mungkin kita akan coba upload file yang besar nah company profilenya kan 55 MB nih kalau kita Open kemudian kita send nah dia akan error karena dia tidak bisa menerima file lebih besar dari 3MB file to large nah ini sudah kita handle nah gimana cara meng-handle errornya supaya tidak seperti ini kita ingin berikan respon error Nah kita bisa menambahkan juga middle were untuk menghander error caranya kita taruh di paling bawah Fuse kemudian kita buat sebuah function nah yang isinya error handling ada Error ada request ada respon ada next nah seperti ini biasanya cuman 3 ini ada 4 karena ini error handling selanjutnya tinggal kita terima saja di sini kita berikan respon Nah kita berikan message sesuai dengan error message apa nah seperti ini ini adalah error handling di mana dengan error handling ini setiap error yang kita dapatkan dari Project FPI ini akan masuk ke sini kalau tidak di handle di dalam function tersebut Oke kita simpan kalau kita Nah kita dapat message file touch ini terlalu besar kalau kita ganti lagi dengan file yang kecil nah ini 2 MB ya ini harusnya masih bisa kita upload picdex nah upload berhasil karena dia hanya 2 MB kita limit maksimal 3 MB nah ini adalah file PDF ya PDF juga bisa kita upload baik demikianlah proses upload dengan menggunakan package