Koneksi JavaScript dan MySQL dengan Node.js

NPM Start Datanya ada 15 dan apakah sekarang udah lebih oke lagi? Namanya misalnya dia Afrizal Kelasnya IF1 Tambah Sekarang udah real time Halo semuanya, berjumpa lagi dengan gue Seperti biasa, kalo udah layarnya bulet dan gue gak pake kece mata Berarti kita bakal tutorial Tutorial kali ini adalah kita bakal coba koneksikan ke Seperti yang bisa kalian lihat disini di layar gue ya Ada localhost phpmyadmin yang artinya kita bakal bermain database Database dengan apa? Bukan dengan PHP karena udah banyak tutorial kalau koneksi PHP ke database MySQL gitu ya Jadi kalau di gua pasti kalau tutorialnya itu lebih ke JavaScript ya Karena gua lebih seneng di situ gitu ya cuy ya Jadi kita bakal coba untuk koneksiin sebuah file JavaScript ke MySQL Untuk connect database-nya kayak gimana Khususnya kita pakai yang namanya Node.js Dan nanti pakai beberapa library untuk bisa menunjang koneksi Antara si javascriptnya ke si Database nya dan juga Nanti kita bakal bikin yang namanya Template engine bukan bikin Ngedevelop template engine supaya Bisa diakses di Browser gitu jadi ada tampilannya Juga gak cuman sekedar koneksi database Tapi kita akan Coba untuk insert data dan juga Select data ya dua itu aja Jangan edit sama jangan delete karena waktunya akan terlalu panjang Itu biar jadi PR kalian aja nanti, oke? Jadi di video ini gue tekankan sekali lagi Kita bakal belajar cara mengkoneksikan ke database Ini buat pemula by the way ya, yang pengen main javascript Di sisi server side-nya Plus nanti kita juga mainan front side-nya, front end-nya gitu ya Pake template engine Buat yang belum tau Node.js sama javascript itu bedanya apa Kalo Node.js itu ya kurang lebih server side-nya si javascript Kalo javascript itu kan lebih di bagian front end ya bro ya Lebih di bagian depan Nah kalo Node.js itu lebih di bagian belakang Kita bermain di bagian belakang tapi nanti kita juga main bagian depan Jadi Node.js nya itu bakal kita compile ke depan juga Supaya bisa bikin output HTML gitu dari si server Node.js yang kita bikin Jadi kita bakal bikin server sederhana Pake Node.js basic banget ini Maya buat pemula pasti bisa ngikutin Syarat pertama kalian mesti punya XMPP nya dulu gitu ya Sebenernya banyak opsi mau XMPP mau WAM atau mau LAM itu ada banyak Tapi kalo gue pake XMPP aja untuk mainan SQL-SQLan kayak gitu database-database ya kalau udah kalian nyalain aja XMPP nya oke yang apache dan mysql nya di running kayak begini gak usah terlalu dipusingin lah kenapa harus ngerunning dua ini dan segala macemnya terus lu buka localhost slash phpmyadmin oke nanti muncul kayak beginian berarti udah running XMPP nya setelah itu kalian pastikan pastikan seperti biasa kalau di video-video gua harus dipastikan bahwa node.js yang kalian punya sudah terinstall gitu atau kalau kalian belum install ya nanti link nya ada di deskripsi seperti biasanya Cara ngetesnya adalah node spasi minv Kalau gue pake versi LTS selalu seperti biasa di versi 16 ya Terus cek juga npm minv Npm akan selalu ngikut ke node.js Ketika lo install node.js maka npmnya bakal ter-include disitu Jadi gak perlu install npm tapi install node.js bakal otomatis nge-install npm Alright, kurang lebih seperti itu Kita lanjut sekarang bikin satu folder baru di desktop seperti biasanya ya CD desktop desek Hai top nah gua di desktop aja bro ya kita bikin satu folder mkdir nama foldernya misalnya tutorial database tutorial DB node.js gini yah masuk ke sana tutorial buat kalian yang belum tahu ini terminalnya git base bisa pakai Open PowerShell Windows gitu ya PowerShell Windows bawaannya si Microsoft Office eh Office aja Microsoft Windows atau pakai git base kayak gue gini, intinya buka terminal masuk ke folder foldernya lu bikin di desktop lah pokoknya mayah tutorial apa namanya gitu bebas jadi kalau udah masuk sini kan nggak ada file apa-apa nih masih kosong kita masukin npm init, minyek gini atau npm init doang deh npm init boleh ya kayak gini ya di enter-enter aja atau npm init miny aja dah npm init miny yang artinya bakal nge-prepare untuk persiapan kita ngoding gitu ya bro ya bakal ada satu file baru setelah nge-npm init miny, miny itu artinya kayak di yes semuanya gitu otomatis makanya terisi gini kalau enggak pakai miny harus ngisi masing-masing right bentar gua cek obs takutnya nggak nyala nyala aman lanjut lagi ya package.json udah kita bikin satu file baru disini touchserver.js karena kita mau bikin server kecil-kecilan node.js di bagian servernya gitu ya untuk ngerunning si koneksi-koneksi database-nya gitu dah sudah ada 2, sudah ada package.json sama ada server.js sekarang buka VS Code kalian masing-masing kalau gue seperti ini, seperti biasa caranya kode spasi. terus, mana gue tarik dulu ini ya VS Code gue server.js masih kosong kita coba sedikit-sedikit demi dahulu eh lah, sedikit-sedikit dahulu gitu, kok demi dahulu sih oke, gue zoom dulu sedikit disini ya kayak gini supaya kalian bisa lihat lebih jelas lagi kita bakal siapin apa aja library yang mesti lu pake gitu untuk bikinan server di node.js ini by the way sekali lagi untuk pemula ya kalau yang udah jago udah skip aja videonya oke pertama kita panggil yang namanya express express itu kayak frameworknya si node.js untuk bikin kayak API atau bikin ya, ya intinya install ini aja dulu lah ya, require express, ikutin dulu aja ntar gue jelasin terus kita juga butuh yang namanya mysql require mysql terus kita butuh juga yang namanya udah ini aja dulu dua biji ya terus kalau udah kayak gini kita install satu package yang kita taruh di sini berarti kita mesti install Express sama install mysql oke mysql itu untuk kebutuhan kita koneksinya bro jadi lu buka di terminal ini new terminal ya di VS Code nya buka kayak gini terus lu npm i express mysql gini, right? jadi install 2 dependensi bro right? mysql dan express, udah cukup kayak gini dulu oke, sekarang kita coba pake expressnya app.use atau const app sama dengan express eee... const app sama dengan express, kayak gini terus selanjut lagi, bentar ini gua close dulu biar gak pusing app.listen app.listen portnya berapa gitu kan, 3000 atau berapa ya, 8000 lah terus disini kayak gini console.log server ready gitu ya kita tes dulu aja ya bro ya kita tes dulu nyala atau enggak oke caranya disini kan udah di masukin tadi ke bagian ini ya lo ketik disini node spasi server.js server ready berarti udah nyala sekarang kita cobain sedikit disini app.get ya slash dalam kurung reg res ntar gue jelasin kalem pokoknya mah oke disini kasih res.send oke Oke, route open Cobain dulu untuk testing ya Ini kita cancel, ctrl c, terus kita running lagi Node spasi server.js, enter Terus kita buka browser Ya bro ya, kita buka browser Bentar Nih, localhost 8000 ya Localhost 8000 Oke, route open Kebuka seperti ini bro Ada oke route open, berarti Server kecil kita sudah siap kita coding lebih jauh lagi gitu Yang penting sampai sini dulu aja Belum koneksi database nya oke Nah kalau udah sampai sini Aduh ini ngapain lagi anjing main steam Main steam main apex ngajak-ngajak ya Oh enggak ngajak-ngajak deng Gue close dulu Alright Ke database Di phpmyadmin di localhost ya masuk sini Terus lu mesti bikin satu database baru Apapun itu terserah lu ya Katakanlah namanya misalnya apa atau apa gitu ya Mahasiswa atau tabel Tabel mahasiswa atau database mahasiswa gitu ya Disini gue udah punya nih karena kemarin udah bikin juga Namanya school right School tabelnya user Nah kalian bikin dulu dummy data ya bro disini Kayak ID nya terus nama kelas Pokoknya random aja terserah lu lah Pokoknya kalo gue cuman ngandelin 2 field doang Nama dan juga kelas Oke gue cuman ngandelin 2 itu doang strukturnya kurang lebih cuma string doang standar gitu, varchar ya, varchar, varchar udah id auto increment, udah kayak gini aja standar untuk ngetesting koneksi database kita ya balik lagi ke vs code kalau kalian lihat disini ini kan ada express nih, express yang kurang lebih fungsinya untuk kita bisa bermain ini, yang app.get ini atau bisa dibuka di browser routes nya ya untuk kebutuhan kita nanti, untuk tambah data dan segala macemnya untuk punya route baru lah kurang lebih gitu mysql untuk koneksi ke Database nya Jadi kita bikin disini Di bagian sini aja deh Kita bikin const DB sama dengan MySQL. create no no mysql.com nextion create connection Oke bener kayak gini ya mysql.com nextion terus buka kurawal seperti ini terus disini kalian ketik host hostnya apa usernya apa terus juga passwordnya apa ya jangan lupa database namenya apa database namenya apa ini by the way yang ini gak usah pake string kayak gini aja oke hostnya localhost database nya namanya tadi gua school sesuaikan aja kalo lu database nya namanya apa masukin disini ya usernya gua root original localhost password nya gak dipake udah kalo udah kayak gini kita panggil select nih kurang lebih kayak select gitu disini ya db db.connect Nah callbacknya itu ada error disini katanya Gini Jika error Maka Kita lempar errornya Kalau gak error maka kita lanjutkan ke beberapa hal Nah lanjutkan ke beberapa halnya itu Kita masukin ini aja Kesini ya tempel Jadi kalau dibaca kurang lebih kayak gini Pertama kita ngedeclare Apa-apa yang kita butuhin Ada express ada mysql Terus kita definisiin lagi si Express nya karena Express itu function kita bikin jadi app App ini untuk apa? Butuh karena kita tuh butuh untuk membuka sebuah routes atau bikin sesuatu di Express.js nya itu sendiri ya Jadi Node.js, Express.js itu segambleng server side nya javascript lah kurang lebih App.get nih ini dari app sini kan oke Lanjut lagi kita tuh udah setup DB nya setup koneksinya disini Terus disini db.connect Nah db.connect untuk Mengkoneksikan, kalau ini kan cuma konfigurasi awal doang Initialisasi lah biasanya sebutnya kayak gitu Terus disini dikoneksikan Dan di javascript DB.connect Punyanya MySQL, bawaannya sono gitu ya Ada callback yang namanya R Atau callback itu function yang Mana hasil dari yang udah kita lakukan disini DB.connect itu menghasilkan sesuatu bro Hasilnya itu ada dimana? Ada di dalam sini Di dalam error gitu Gue kasih nama error karena callbacknya disini adalah yang memang Error dan gak error. Maka kita kasih nama error. Jika error, ini masuk lagi ke sebuah function. Dan di dalam function ini gue tulis. Jika error maka lemparlah error. Kurang lebih gitu. Tapi kalau enggak maka eksekusi ini. Atau kalau enggak kita disini juga ketik juga bisa. Console.log database connected. Gini dulu untuk ngetes ya. Kita coba save dulu aja. Terus disini kita... cancel dulu terus kita running lagi kita belum pakai plugin untuk bisa auto reload ya belum pakai nanti aja gampang kalau Maya satu-satu sabar gitu running database connected aman ya jadi set apaan ini tuh udah connect ke mysql kita yang ada di php myadmin ini karena database nya udah namanya sama school terus settingannya udah sama jadi aman bro connect database connected udah sederhana itu tapi kalau masih belum ada apa-apanya ya Terus disini ada res.sen ok road open Sekarang gue pengen nge-select database-nya yang ada disini Ini kan tabel user, kita keluarin bro Kita keluarin kesini Caranya simple sekali Di dalam sini kita bikin cons dulu Ini versi kasaran ya, kodingannya ini gak bagus Tapi untuk belajar oke Tapi kalau dipake di industri, mabok, hancur, dimarahin bos Tapi buat belajar, ini oke Kalau kalian kerja ginian aja gak ngerti apalagi ntar Di industri beneran gitu loh Jadi minimal belajar udah bisa kayak gini Ntar pas kerja jadi metode yang lebih bagus lagi gitu lah ya Kecuali kalau lo pas belajar udah tiba-tiba metodenya bagus semua gitu kan Gokil kalau gitu Ini kan kita cuma mainan satu file Satu file Gak dipisah-pisah juga Gak ada middleware dan segala macem Jadi ini beneran versi pemula Kita bikin const SQL untuk query-queryannya ya Untuk nge-select ya kan udah pasti Select from Select tuh iya kan Select bintang from sorry Select bintang from nama tabelnya Nama tabelnya kan user Udah kayak gini aja Terus disini Db.query Untuk munculin ya Db.query Kok db sih gue bilangnya Db.query Disini isinya SQL Disini isinya kurang lebih ada 3 callback dari bawaan mysql library nya Ada error terus ada result nya Apa hasilnya Sama ada field Fieldnya apa aja Tapi kita gak akan pakai parameter ketiga Karena kita cuma butuh resultnya doang Terus kita bikin disini sama dengan Lebih dari Yang kalau di gua bakal jadi panah kayak gini Sama dengan lebih dari ya bro ya Nanti bakal jadi seperti itu Yang artinya ini Raw function di javascript ES6 Standardisasi codingan di javascript Yang lebih mudah kurang lebih gitu Disini kita lakukan console.log aja dulu Console.log Hasil database Terus kita kasih gini Koma Console look fungsinya untuk apa bang? Console look itu untuk munculin output ke terminal lo gitu ya Kalau di sisi server side Terus gini tinggal ketik result Result dulu aja kayak gini Kalo udah kita save Kita coba buka lagi Ya kita coba buka lagi Matiin dulu Terus kita running lagi Ada? Udah ada ya Muncul ID 1, 4, 5, 6, 7, 8, 9, 10 Nih udah muncul ya Kalian bisa liat disini Yang kalian udah muncul belum bro? Muncul dong masa gak muncul Baru sampe sini aja udah error Nih 1, 4, 5, 6 udah sesuai ya Sesuai muncul sama yang kayak disini bro Step berikutnya Sabar dulu gue mau sebat dulu Gue pause dulu OBSnya bentar Oke lanjut lagi ya Tadi udah sampai mana? Sampai console log Udah muncul seperti ini Kita coba munculin hasil ini Ke bagian depan Kesini misalnya Maka Aduh mouse gue basah anjir Maka ini harus dimasukin ke dalam Sini Ini di cut aja Ini di cut masukin ke dalam Sini ya ini result ini kita coba keluarin sini apakah bisa atau enggak ya res.send result gini coba save dulu terus ini cancel nyalain lagi ya cek abs takutnya belum running, oh running aman kita buka browser buka ada tuh ada ya ada di sini tapi tapi di konsol tadi kan agak ngeri ya di konsolnya tuh ada raw data paket kayak begini ya gak sih? di lu ada juga gak? kalau di gua kan ada nih, jadi agak sedikit mengerikan maka kita parse dulu bro disini kita parse dulu ya resultnya kita bikin disini const user sama dengan users lagi nih json.parse di dalam kurung kita stringify kan json.stringify result gini bro disini kita panggilnya tuh user Jadi awal kali hasil keluaran dari MySQL data yang ada di database ke console.log ini Itu adalah munculin ada row data paket kayak beginian Kayak males aja gue liatnya gitu loh ya Walaupun sebenernya pas ke depan itu udah kayak gini udah aman udah bisa consume kita Tapi gue gak mau gue pengennya yang ada di terminal juga hilang gitu Maka kita pindahin ini kesini Sorry ke bawah terus resultnya ganti jadi users Karena kita udah reformat Resultnya udah di format ulang supaya jadi result yang seperti yang ada di depan gitu loh ya Kita coba matiin terus nyalain lagi Nah kan hasil dari database langsung array plus object Udah gak ada row data paket, row data paket lagi Ya bro bener kayak gini Kalo udah kayak gini lebih enak lagi Nah supaya bisa masuk ke HTML, ke tampilan HTML Kita butuh yang namanya template engine bro Kita bakal pake yang namanya EJS Kita install dulu ya, ini matiin NPM spasi I spasi EJS EJS itu template engine Buat yang belum tau template engine itu apaan Kurang lebih gimana caranya supaya data ini bisa dilempar jadi HTML dan dipake di HTML nanti Oke kita bikin satu folder baru disini Folder view Views Terus kasih aja di dalamnya Index.ejs Nah index.ejs ini kurang lebih HTML nya ya bro ya HTML yang berformat lain tapi bukan bukan index.html tapi index.ejs tapi isinya tetap HTML juga kalian ketik aja tanda seru tab kayak gini HTML standar alright disini kasih nama dia tutorial dia code tutor node nah ginilah 1 misalnya disini kita kasih dulu h1 testing kayak gini alright untuk di index.ejs di dalam folder views karena tadi kita udah install ejs nya maka di dalam package json bakal ada Dependency baru ini nih EJS Express MySQL Ada 3 Karena kita udah nginstall 3 biji itu tadi ya kan Sekarang tugas kita adalah Gimana caranya supaya si index.ejs ini bisa nerima data dari si Yang ada disini Yang ada di app.get kita Routes utama kita di API Ini tuh kayak API gitu ya Sekarang kita coding di bagian sini App.set Oke Set views, views views, gini fungsinya apa bang? untuk ngasih tau bahwa template HTML kita ada di folder views views nya ada di folder views nah ini tuh template engine nya ada di views, gitu loh ya terus kita declare lagi disini satu app.set view engine nya itu pake apa koma, karena kita tadi pake ejs, maka disini ketik aja ejs alright, jadi kita pake EJS sebagai template engine Dan di setup cuman kayak gini doang Set view engine nya sebagai EJS Terus set dimana Directory untuk HTML Itu berada View nya directory Si template engine nya ada di folder views Index.ejs kurang lebih kayak gitu udah udah udah belum kalau udah kayak gini sekarang kita kirim ke depan dengan cara ini diganti jangan res.sen tapi jadi res.render karena kan kita mau render ke HTML ya bro ya res.render kemana yang mau di render ini kan kita baru ngasih tahu bahwa folder template engine itu ada di fuse dan disini dikasih tahu nih kita harus ngasih tahu kemana filenya filenya ke index Udah, gak perlu kasih.ejs karena tadi kita udah declare di atas bahwa view engine-nya adalah ejs Jadi udah kayak gini doang Apa yang dikirim? Yang dikirim adalah, pake kurawal ya bro, biar jadi objek Yang dikirim adalah data users User, isinya itu apa? Isinya itu yang ada disini Tadi mana? User, nah ini, ini kita kirim ke depan Jadi kita kirim disini, users Oke, kurang lebih seperti ini Kalau udah kayak gini, maka kita masuk ke index.ejs kita cobain disini panggil ya panggil dulu disini pakai cara yang sederhana dulu cara sederhana dulu bentar ya server.js nya nah ini nih ini kita kasih lagi satu satu data title titik dua dia code tutorial misalnya gini title ya yang dikirim title dan user jadi kita ngirim dua parameter dua data data users dan data title data title value nya adalah dia code tutorial Maka disini kalau pengen manggil itu Yaudah testing ini kita ganti Cara manggil EJS nya Cara manggil si data yang ada di backend Ini kan kita gak ada import-import disini di HTML doang loh ya Bisa manggil data Jadi disini pake yang namanya kayak beginian Kayak PHP gitu bro Ya kalau PHP kan gini Ya kalau di kita kayak gini Terus disini pake kurawal Kayak gini aja Terus kita coba panggil yang tadi itu namanya title. Gini kan bro ya. Betul. Kita coba save dulu. Terus kita coba running. Apa benar atau enggak gue. Gue juga agak lupa sih. Kita coba. Hasil database udah oke. Kita buka browser. Kita refresh. Kagak muncul. Berarti salah pemanggilannya bukan pake kurung. Tapi gini doang udah. Udah kayak gini doang ya. Title. Mungkin. Kita running ulang. Hai es Allah right kita buka browser lupa sama dengan disini harus pakai sama dengan ya save kita running lagi Oke kita buka browsernya refresh dia kode tutorial Alright data ini ada dari back and masuk ke front-end kalau kita inspect elemen apa yang terjadi Bang ya sama aja Bro kayak Tuh kayak gini jadinya ini kan tapi data dari backend ya kurang lebih kayak gitu Alright sekarang kita lanjut lagi Untuk memunculkan data yang ada di user Data user tadi yang ada di database kan udah ada disini nih User Kita udah kirim juga Kita tinggal panggil bro disini Dengan cara div Div atau ul ya Div lah div dulu boleh lah ya Div Terus kita masukin ul disini Disini li Nah Ayo kita bakal looping si li nya berarti cara looping adalah disini persen Oke kita tutup persennya susah sih memang ribet-ribet beginian ya Bro kita ketik ke for untuk pengulangan dalam kurung dalam kurung ya kulung lagi anjing let kita kasih data dulu user in users karena tadi kan disana namanya users terus gua perkecil jadi user untuk mapping data ya terus kita kasih kurawal nah disini kurawalnya gak boleh disitu bro harus di luar kurawalnya mesti disini jadi kita tutup lagi disini nah gitu ya kayak php lah sama kayak kalau laravel tuh ada template engine juga kan ada blade ada jet ya bisa pake segala macem gitu kan disini kita panggil juga sama kayak tadi press pake sama dengan kalau single datanya pake sama dengan user.nama tadi kan datanya ada apa namanya nama sama kelas nih nama sama kelas maka disini user.nama tutup strip aja anjing susah ngetiknya memang ini bro user.kelas tutup kita save dulu terus kita coba refresh Apakah sudah berhasil atau enggak nodeserver.cs data masih ada aman ya kita coba refresh kagak muncul berarti gua salah manggil bro bentar kita troubleshooting dulu ya let user in bukan in sih kayaknya tapi off bukan in ya tapi off sorry salah bukan in tapi off kalau tadi kan in ya kita ganti jadi off harusnya sih off apa in ya kalau di python kan in kita coba save agak sedikit sedikit lupa sintaks bro mau dimaklum ya kalau udah di running ulang terus kita coba refresh Sudah muncul kalian bro? Ada disini datanya sesuai ya Rudiansah, ada Aryawan, ada Anugrah, Sandi dan segala macemnya Sesuai seperti yang ada disini Tuh, Rudiansah, Aryawan, segala macemnya Ini baru select data Sekarang kita bakal coba untuk modifikasi dulu Tampilannya supaya lebih indah gitu Kita pake bootstrap dulu ya Bisa kok bisa pake bootstrap itu bisa Karena ini kan HTML-HTML juga bro ya Jadi bisa dimasuk-masukin terserah kalian Oke, tinggal di kopas aja. Lo buka bootstrap documentation. Kopas yang CSS ini. Masukin ke bagian head sini. Terus satu lagi. Yang bagian bundle ini. Kopas masukin ke atas slash body. Eh sorry, disini nih. Tempel. Udah, kurang lebih kayak gitu. Terus kita, yang ini kita pakein jadi tabel bro. Kita jadiin tabel. Jangan Ul kayak gini kan jelek ya. maka div ini kita kasih kelas dulu kelas container biar dia agak mojok ke tengah terus yang title kita masukin disini jadi kurang lebih kayak begini nih apaan anjir nah div h1ul div seperti ini bodinya mana ya tadi bodinya ketutup keilang bodinya salah Hai Sorry body ini apa dah daya nah seperti ini ya div class container kita coba running ulang aman gak bootstrap nya ya untuk mencoba dulu sering ada kalau ada harusnya dia mojok ke tengah mojok tapi ke tengah gitu loh Nah berarti udah terinstall bootstrapnya ya Sekarang kita pake ini, ini tabel yang ada di bootstrap Buku aja lah Sini cari yang namanya tabel Di bagian mana gue juga gak tau Tunggu, konten Tabel, nah ini nih Kita pake yang ini aja Caranya, supaya gak pusing dulu ya Kopas aja ini Kopas Masukin ke bawah sini Oke Terus kita ganti iniannya Jadi ID Terus ini jadi nama Ini jadi kelas Ini gak ada Karena datanya kan cuma itu Ini hapus Terus Ini biarin dulu yang atas Supaya nanti kita bisa timpa Ini semua tr nya kita hapus Kecuali sisain satu doang ini Dan td nya juga kita hapus Sisain kayak gini Terus ini kita kopas bro Nah Ini dari sini ya. Shred. Dari 4 itu kita kopas. Masukin ke sini. Right. Terus li nya diganti pake TH. Samain kayak yang ini nih. TH scope sama dengan row. Nah udah kayak gitu. Ininya juga jangan lupa. Tutup belakangnya TH juga. TH ini kita hapus. Udah. UL ini kita hapus. Udah. Sekarang kita format ulang supaya lebih bagus Pretier gue mana anjing Pretier Gak berfungsi Pretiernya gak apa-apa lah Gini ya pokoknya mah Terus kita coba buka lagi Apakah yang terjadi Running ulang Kalau kalian bingung di replay aja videonya di back-back dulu Karena takutnya kecepetan ya kan Nah Ada yang salah sepertinya ya Harusnya di TD bukan di TH bro Salah looping Kenapa? Karena ternyata Gue lupa Sorry bro Lupa Ini bukan di strip kayak gini Tadi tuh udah bener ya Kita ctrl z lagi Tadi udah bener bro Udah bener itu Gak perlu pake THTH Di luar Biarin aja THnya disini Sampai kayak gini ya Sorry Tadi anggap aja gak ada videonya Ini hapus Ini hapus Yang ini biarkan nama Yang ini biarkan Apa namanya Kelas Nah gitu maksud gue Satu lagi ID ya, yang ini ganti jadi ID Oke, begini Ada nama, ada ID gitu loh Ada nama, ada ID, ada kelas Kita save Tadi salah, tadi tuh harusnya Karena ini kan TH-nya ada 3, maka disini TH-nya ada 3 juga Dan udah di looping gitu bro Udah di looping datanya di dalam user Maka ketika gue panggil user.id, user.nama, user.kelas Itu bakal nge-looping masing-masing semuanya Kita coba running ulang ya buka lagi, kita refresh what the f... ada yang lupa lagi mohon dimaklum, masukin tr nya ke dalam sini masukin ke dalam sini tr nya ya, lupa bro sorry, maklum udah, coba save lagi terus di nyalain ulang terus dibuka browsernya, udah berubah ya, aman id 145678910 bla bla bla bla bla ya, udah sesuai sekarang kita ganti titlenya Hai jadi daftar murid misalnya gitu sini titelnya misalnya bukan dia tutorial ya daftar murid daftar murid daftar murid kelas right terus disini berarti kita jangan H1 lah kegedean H2 aja atau H3 dah ya div ini ada the head hai hai Hai dikurang menjerok ke dalam sepertinya nah biar lu pada nggak pusing Bro mitabula Sigo udah mulai hancur nih udah seperti ini ya kita coba refresh lagi kita cek daftar murid kelas aman ya cukup enak cukup aman supaya nggak pusing kita nyala matiin nyala matiin mulu gitu kita install yang namanya no demon bro ya kita cancel dulu ini npm i spasi min min safe no demon Gini ya bro, untuk install library supaya kita gak perlu menyala matiin lagi si servernya Biar dia nyala otomatis ketika kita reload dan segala macem ya Dan kalau udah terinstall nanti bakal kayak gini kurang lebih tampilannya ya Terus kita mesti cek di bagian package.json Sudah ada disini di dependency, nambah baru ya nodemon Dan kita tambahin di bagian script ya Untuk penjelasan script udah gue jelasin di video gue sebelumnya yang di tutorial react.js gitu ya Kalian ada tuh di apa tuh namanya bikin bikin website film itu gue jelasin panjang lebar seputar script ini jadi bisa dicek di sana kita bikin start di sini terus kita kasih disini nodemon server.js ya terus kasih koma jadi kita coba running sekarang cara ngerunningnya tinggal npm start dah muncul ini kita nggak perlu mati nyala mati nyala lagi udah otomatis kalau kita ngerubah codingannya ya kayak itu lanjut lagi Hai yang belum ada adalah forum untuk kita tambah data ya Bro ini kan baru ngeget data yang ada di database kita cobain tambah-tambah data langsung dari database dulu direct ya ini kan masih ada 10 nih Junaidi terakhir kita coba tambah insert lagi disini insert misalnya Jojo di sini Jojo Harry misalnya gini kelasnya misalnya if1 terus satu lagi di sini misalnya namanya Daud Hanif misalnya if 4 misalnya terus kita Insert Oke udah terinsert terinsert lagi udah terinsert terus kita refresh ini kan ada 10 ya kita refresh eh belum dinyalain udah nyala belum sih udah kan loh kok nggak berfungsi sih ya elah Oh bentar harus di restart dulu karena itu kan database ada yang di koprek ya bukan codingan kita jadi kita restart dulu nah udah ya 11 12 oke Lanjut lagi, lanjut lagi, lanjut Kita cari dulu di bootstrap untuk forum-foruman Nah ini ada forum, terus kita cari yang overview aja Yang paling simple, layout, ini boleh ya Kita ambil sampai email dan passwordnya doang Email dan passwordnya doang, sampai sini nih Shred, udah Kita copas ke bagian bawah sini Di bawah table ya Kita copas disini Terus kita masukin forum Ini kan divnya belum ketutup Ini div ini Ini div ini Ini forumnya harus ditutup No Tutup forumnya ya Dikurang lebih Kayak gini Forum dari bootstrap Kita save dulu Kita coba lihat Kok kayak gak auto reload sih ini Oh udah auto reload aman Gak perlu dimatiin ya Maksudnya servernya gak perlu dimatiin Oke Udah Kasih ciri disini di bawah sini bolehlah H2 atau H3 gitu tambah murid tambah murid baru oke terus tambahin button satu di bagian bawah sini button oh input type aja deh input type button ya input type button terus kelasnya BTN BTN primari aja atau denger boleh Hai denger bolehlah kini value-value nya adalah tambahkan kalau di save terus kita cek lagi di browser maka dadanya tambahkan ya cuman ini kegedean Bang Iya karena gua jumlahnya kan bener-bener ngejum banget bro Hai nah kayak gini ya tambah murid baru Oke email passwordnya kita ganti jadi sesuai seperti yang ada database kita ada nama ada kelas ya kita ganti inputnya bukan email tapi teks input yang bawahnya juga teks terus id-nya itu kita hapus aja karena kita enggak butuh ID di sini hapus aja terus value yang email ganti jadi nama lengkap terus yang password jadi kelas for nya itu kita bolehlah for nya diisi ini kelas ini nama input type text kelas forum kontrol di sini kita tambahin name nama input type text name nama ya untuk ditangkep nanti di sini input type text name kelas Nah dua ini name ya sama kayak di anak-anak PHP gitu ya Name ini untuk ditangkep disana sebagai variable gitu ya Sebagai parameter Name, nama, sama name, kelas Inputan namenya gitu Kalau udah di save jangan lupa Disini kita tambahin action Menuju ke slash Slashnya itu tambah misalnya Atau slash add atau slash tambah boleh lah Oke metodenya kita kasih pause Supaya secure ceritanya gitu Kalau udah kita cek lagi Udah berubah nama lengkap dan udah berubah kelas Oke sekarang kita bikin sebuah API baru disini Di server.js balik lagi kesini ya Sekarang kita bikin untuk nge-insert data Disini kita enter-enter supaya gak pusing ya Ini untuk kita kasih comment Untuk get data Disini kita kasih comment untuk insert data coding-nya sama kayak yang itu aja, app.post tapi nya parameternya, yang slash nya itu yang tadi, tambahkan sesuai seperti yang ada di index.js nya action nya kan ke slash tambah, oh slash tambah maka disini bukan tambahkan tapi slash tambah gini, terus samain aja sisanya mah request, respon terus sama dengan lebih dari, maka jadi panah kalau di gua nah kita bikin satu variable baru disini, const misalnya insert sql Insert SQL sama dengan Codingannya kurang lebih kayak Insert into Nama tabelnya user Apa aja yang di insert Yang di insert adalah nama dan kelas Valuesnya itu apa aja Terus Kalau udah kayak begini kita eksekusi db.query Insert SQL R Sama apa lagi tadi tuh ada resultnya Tapi sebenernya kita gak akan pake resultnya Samain aja ke yang atas bro Ini kita mesti nangkep data Nangkep data dari yang hasil kita ketik disini kan name Nama inputannya tuh nama sama kelas ya kan Kita harus ngambil ini data ini Caranya gampang Disini di values kita langsung hardcode aja Kita langsung panggil langsung disini Kan disini gue pakenya tuh curc ya gini backtick ya bukan pakai string yang seperti yang di atas kalau ini kan string nah ini kan string kalau ini gua nggak string tapi pakai ini jadi value nya bisa dimasukin disini bro pakai dan kurawal kayak gini oke pakai kurawal reg.body.name satu lagi koma reg.body.class oh bukan name itu nama tadi kan parameter inputnya nama ini class Jangan lupa dikasih curah disini ya. Kasih string satu gini. Karena ini query SQL. Ini juga. Ini juga. Nah. Kalau udah kayak gitu disini. If R seperti biasa. Draw R Gini Kalau berhasil maka. Res.redirect ke slash doang. Udah. Hai gini aja dulu bro sebelum kita testing kita harus masukin dulu yang namanya body parser karena ini metodenya pos ya kita masukin disini body parser body parser sama dengan require body body parser dan kita harus install ini juga bro ya save dulu kita install matiin dulu NPM i body parser seperti ini hai hai kita tungguin kalau udah kita tinggal masukin di sini app.use bodyparser.url encode dalam kurung eh dalam kurung apa ya dalam kurung bener ya kurawal extended true udah ini format standar untuk menerima form input gitu ya yang metodenya pos pakai bodyparser terus kita coba running lagi ini codingnya udah udah oke aja nih harusnya nih segini ya udah bisa nge-insert harusnya kita coba running NPM start terus kita coba browsernya di refresh kita coba tambah data deden gogo gogo gogo if sembilan if-5 if-3 dah tambahkan Oh sebentar berarti harus ada yang kita ubah di bagian button karena dia tidak berinteraksi ini ternyata nih harus submit tipenya bro bukan tipe buton gitu ya karena ini kan di dalam form sekarang kita coba refresh lagi browsernya Kita tambahin tadi siapa? Deden Golang lah gini Deden Golang IF3 Kayaknya udah tadi 3 kali gagal sekarang berapa kali gagal Tambahkan Oke refresh Kok gak muncul ke database kita cek dulu Deden Golang ada disini tapi disini gak ada Oke kita modifikasi sedikit karena ini ada satu yang bermasalah Gini ya Ini kan kita query dulu baru masuk ke get Kita keluarin bro Kita keluarin app get ini Ya Ayo kita masukin DB query ini mana nih ini kita keluarin sini oke si pos juga ini kita keluarin masukin sini segini si DB query ini nah ini kan query-query ya nih ini tuh ada di dalam harusnya Hai ini mah yang ada di dalam get Bro di dalam sini get nah ketika get maka DB query SQL SQL nya ini dimasukin ke sini jadi masing-masing yaitu kita sedikit touch up supaya lebih indah lagi jadi ketika slash maka akan nge-select from terus DB query nya seperti ini lanjut-lanjut seperti biasanya kita hapus-hapusin console.log nya ya mana console.log ini hapus karena udah yakin enggak ada lagi console.log harusnya console.log Nah kecuali yang ini aja database connected Jadi kalau gue baca lagi nih ya Kalau gue baca lagi dari awal Kita punya 3 library Terus kita udah set juga template engine nya disini Body parser untuk nge-post from From lagi form Supaya bisa ditangkep hasil inputannya Terus db connect ini untuk koneksi ke database nya Dan di dalamnya kalau error maka bakal nge-throw error Tapi kalau enggak maka bakal bisa nge-eksekusi yang slash ini Routes utama kita Untuk nampilin segala macam data user Ya Nah yang ini dbquery mengeksekusi query untuk user select, select user gitu, from ya, select bintang from user. Nah ini kan dbquery-nya ini nih, ini res.render kita masukin ke atas. Nah kayak gini ya. Oke ini satu blok untuk get data, yang ini satu blok untuk nge-post data. Sekarang kita save, kita running lagi. NPM start. agak sedikit belibet memang database connected udah ini finishing ya kita kesimpulan kesimpulannya udah ready atau belum ini refresh datanya ada 15 dan apakah sekarang udah lebih oke lagi namanya saya diafriza kelasnya if1 tambah sekarang udah realtime hah anjir ya bukan realtime sebenarnya tapi intinya langsung masuk sana gitu loh ya misalnya disini jajang Nur jajang Nur if3 Kita tambah langsung jajang nur masuk sini ya Kalau kita refresh-refresh pun aman Karena di database pun sudah bertambah banyak gitu So kurang lebih kayak gitu aja Semoga video ini bermanfaat bagi kalian semua yang lagi belajar javascript Di backend ataupun di frontend ya Sampai jumpa di video berikutnya Bye bye

Jadi di video ini gue tekankan sekali lagi Kita bakal belajar cara mengkoneksikan ke database Ini buat pemula by the way ya, yang pengen main javascript Di sisi server side-nya Plus nanti kita juga mainan front side-nya, front end-nya gitu ya Pake template engine Buat yang belum tau Node.js sama javascript itu bedanya apa Kalo Node.js itu ya kurang lebih server side-nya si javascript Kalo javascript itu kan lebih di bagian front end ya bro ya Lebih di bagian depan Nah kalo Node.js itu lebih di bagian belakang Kita bermain di bagian belakang tapi nanti kita juga main bagian depan Jadi Node.js nya itu bakal kita compile ke depan juga Supaya bisa bikin output HTML gitu dari si server Node.js yang kita bikin Jadi kita bakal bikin server sederhana Pake Node.js basic banget ini Maya buat pemula pasti bisa ngikutin Syarat pertama kalian mesti punya XMPP nya dulu gitu ya Sebenernya banyak opsi mau XMPP mau WAM atau mau LAM itu ada banyak Tapi kalo gue pake XMPP aja untuk mainan SQL-SQLan kayak gitu database-database ya kalau udah kalian nyalain aja XMPP nya oke yang apache dan mysql nya di running kayak begini gak usah terlalu dipusingin lah kenapa harus ngerunning dua ini dan segala macemnya terus lu buka localhost slash phpmyadmin oke nanti muncul kayak beginian berarti udah running XMPP nya setelah itu kalian pastikan pastikan seperti biasa kalau di video-video gua harus dipastikan bahwa node.js yang kalian punya sudah terinstall gitu atau kalau kalian belum install ya nanti link nya ada di deskripsi seperti biasanya Cara ngetesnya adalah node spasi minv Kalau gue pake versi LTS selalu seperti biasa di versi 16 ya Terus cek juga npm minv Npm akan selalu ngikut ke node.js Ketika lo install node.js maka npmnya bakal ter-include disitu Jadi gak perlu install npm tapi install node.js bakal otomatis nge-install npm Alright, kurang lebih seperti itu Kita lanjut sekarang bikin satu folder baru di desktop seperti biasanya ya CD desktop desek Hai top nah gua di desktop aja bro ya kita bikin satu folder mkdir nama foldernya misalnya tutorial database tutorial DB node.js gini yah masuk ke sana tutorial buat kalian yang belum tahu ini terminalnya git base bisa pakai Open PowerShell Windows gitu ya PowerShell Windows bawaannya si Microsoft Office eh Office aja Microsoft Windows atau pakai git base kayak gue gini, intinya buka terminal masuk ke folder foldernya lu bikin di desktop lah pokoknya mayah tutorial apa namanya gitu bebas jadi kalau udah masuk sini kan nggak ada file apa-apa nih masih kosong kita masukin npm init, minyek gini atau npm init doang deh npm init boleh ya kayak gini ya di enter-enter aja atau npm init miny aja dah npm init miny yang artinya bakal nge-prepare untuk persiapan kita ngoding gitu ya bro ya bakal ada satu file baru setelah nge-npm init miny, miny itu artinya kayak di yes semuanya gitu otomatis makanya terisi gini kalau enggak pakai miny harus ngisi masing-masing right bentar gua cek obs takutnya nggak nyala nyala aman lanjut lagi ya package.json udah kita bikin satu file baru disini touchserver.js karena kita mau bikin server kecil-kecilan node.js di bagian servernya gitu ya untuk ngerunning si koneksi-koneksi database-nya gitu dah sudah ada 2, sudah ada package.json sama ada server.js sekarang buka VS Code kalian masing-masing kalau gue seperti ini, seperti biasa caranya kode spasi. terus, mana gue tarik dulu ini ya VS Code gue server.js masih kosong kita coba sedikit-sedikit demi dahulu eh lah, sedikit-sedikit dahulu gitu, kok demi dahulu sih oke, gue zoom dulu sedikit disini ya kayak gini supaya kalian bisa lihat lebih jelas lagi kita bakal siapin apa aja library yang mesti lu pake gitu untuk bikinan server di node.js ini by the way sekali lagi untuk pemula ya kalau yang udah jago udah skip aja videonya oke pertama kita panggil yang namanya express express itu kayak frameworknya si node.js untuk bikin kayak API atau bikin ya, ya intinya install ini aja dulu lah ya, require express, ikutin dulu aja ntar gue jelasin terus kita juga butuh yang namanya mysql require mysql terus kita butuh juga yang namanya udah ini aja dulu dua biji ya terus kalau udah kayak gini kita install satu package yang kita taruh di sini berarti kita mesti install Express sama install mysql oke mysql itu untuk kebutuhan kita koneksinya bro jadi lu buka di terminal ini new terminal ya di VS Code nya buka kayak gini terus lu npm i express mysql gini, right? jadi install 2 dependensi bro right?

mysql dan express, udah cukup kayak gini dulu oke, sekarang kita coba pake expressnya app.use atau const app sama dengan express eee... const app sama dengan express, kayak gini terus selanjut lagi, bentar ini gua close dulu biar gak pusing app.listen app.listen portnya berapa gitu kan, 3000 atau berapa ya, 8000 lah terus disini kayak gini console.log server ready gitu ya kita tes dulu aja ya bro ya kita tes dulu nyala atau enggak oke caranya disini kan udah di masukin tadi ke bagian ini ya lo ketik disini node spasi server.js server ready berarti udah nyala sekarang kita cobain sedikit disini app.get ya slash dalam kurung reg res ntar gue jelasin kalem pokoknya mah oke disini kasih res.send oke Oke, route open Cobain dulu untuk testing ya Ini kita cancel, ctrl c, terus kita running lagi Node spasi server.js, enter Terus kita buka browser Ya bro ya, kita buka browser Bentar Nih, localhost 8000 ya Localhost 8000 Oke, route open Kebuka seperti ini bro Ada oke route open, berarti Server kecil kita sudah siap kita coding lebih jauh lagi gitu Yang penting sampai sini dulu aja Belum koneksi database nya oke Nah kalau udah sampai sini Aduh ini ngapain lagi anjing main steam Main steam main apex ngajak-ngajak ya Oh enggak ngajak-ngajak deng Gue close dulu Alright Ke database Di phpmyadmin di localhost ya masuk sini Terus lu mesti bikin satu database baru Apapun itu terserah lu ya Katakanlah namanya misalnya apa atau apa gitu ya Mahasiswa atau tabel Tabel mahasiswa atau database mahasiswa gitu ya Disini gue udah punya nih karena kemarin udah bikin juga Namanya school right School tabelnya user Nah kalian bikin dulu dummy data ya bro disini Kayak ID nya terus nama kelas Pokoknya random aja terserah lu lah Pokoknya kalo gue cuman ngandelin 2 field doang Nama dan juga kelas Oke gue cuman ngandelin 2 itu doang strukturnya kurang lebih cuma string doang standar gitu, varchar ya, varchar, varchar udah id auto increment, udah kayak gini aja standar untuk ngetesting koneksi database kita ya balik lagi ke vs code kalau kalian lihat disini ini kan ada express nih, express yang kurang lebih fungsinya untuk kita bisa bermain ini, yang app.get ini atau bisa dibuka di browser routes nya ya untuk kebutuhan kita nanti, untuk tambah data dan segala macemnya untuk punya route baru lah kurang lebih gitu mysql untuk koneksi ke Database nya Jadi kita bikin disini Di bagian sini aja deh Kita bikin const DB sama dengan MySQL. create no no mysql.com nextion create connection Oke bener kayak gini ya mysql.com nextion terus buka kurawal seperti ini terus disini kalian ketik host hostnya apa usernya apa terus juga passwordnya apa ya jangan lupa database namenya apa database namenya apa ini by the way yang ini gak usah pake string kayak gini aja oke hostnya localhost database nya namanya tadi gua school sesuaikan aja kalo lu database nya namanya apa masukin disini ya usernya gua root original localhost password nya gak dipake udah kalo udah kayak gini kita panggil select nih kurang lebih kayak select gitu disini ya db db.connect Nah callbacknya itu ada error disini katanya Gini Jika error Maka Kita lempar errornya Kalau gak error maka kita lanjutkan ke beberapa hal Nah lanjutkan ke beberapa halnya itu Kita masukin ini aja Kesini ya tempel Jadi kalau dibaca kurang lebih kayak gini Pertama kita ngedeclare Apa-apa yang kita butuhin Ada express ada mysql Terus kita definisiin lagi si Express nya karena Express itu function kita bikin jadi app App ini untuk apa?

Butuh karena kita tuh butuh untuk membuka sebuah routes atau bikin sesuatu di Express.js nya itu sendiri ya Jadi Node.js, Express.js itu segambleng server side nya javascript lah kurang lebih App.get nih ini dari app sini kan oke Lanjut lagi kita tuh udah setup DB nya setup koneksinya disini Terus disini db.connect Nah db.connect untuk Mengkoneksikan, kalau ini kan cuma konfigurasi awal doang Initialisasi lah biasanya sebutnya kayak gitu Terus disini dikoneksikan Dan di javascript DB.connect Punyanya MySQL, bawaannya sono gitu ya Ada callback yang namanya R Atau callback itu function yang Mana hasil dari yang udah kita lakukan disini DB.connect itu menghasilkan sesuatu bro Hasilnya itu ada dimana? Ada di dalam sini Di dalam error gitu Gue kasih nama error karena callbacknya disini adalah yang memang Error dan gak error. Maka kita kasih nama error.

Jika error, ini masuk lagi ke sebuah function. Dan di dalam function ini gue tulis. Jika error maka lemparlah error. Kurang lebih gitu. Tapi kalau enggak maka eksekusi ini.

Atau kalau enggak kita disini juga ketik juga bisa. Console.log database connected. Gini dulu untuk ngetes ya. Kita coba save dulu aja. Terus disini kita...

cancel dulu terus kita running lagi kita belum pakai plugin untuk bisa auto reload ya belum pakai nanti aja gampang kalau Maya satu-satu sabar gitu running database connected aman ya jadi set apaan ini tuh udah connect ke mysql kita yang ada di php myadmin ini karena database nya udah namanya sama school terus settingannya udah sama jadi aman bro connect database connected udah sederhana itu tapi kalau masih belum ada apa-apanya ya Terus disini ada res.sen ok road open Sekarang gue pengen nge-select database-nya yang ada disini Ini kan tabel user, kita keluarin bro Kita keluarin kesini Caranya simple sekali Di dalam sini kita bikin cons dulu Ini versi kasaran ya, kodingannya ini gak bagus Tapi untuk belajar oke Tapi kalau dipake di industri, mabok, hancur, dimarahin bos Tapi buat belajar, ini oke Kalau kalian kerja ginian aja gak ngerti apalagi ntar Di industri beneran gitu loh Jadi minimal belajar udah bisa kayak gini Ntar pas kerja jadi metode yang lebih bagus lagi gitu lah ya Kecuali kalau lo pas belajar udah tiba-tiba metodenya bagus semua gitu kan Gokil kalau gitu Ini kan kita cuma mainan satu file Satu file Gak dipisah-pisah juga Gak ada middleware dan segala macem Jadi ini beneran versi pemula Kita bikin const SQL untuk query-queryannya ya Untuk nge-select ya kan udah pasti Select from Select tuh iya kan Select bintang from sorry Select bintang from nama tabelnya Nama tabelnya kan user Udah kayak gini aja Terus disini Db.query Untuk munculin ya Db.query Kok db sih gue bilangnya Db.query Disini isinya SQL Disini isinya kurang lebih ada 3 callback dari bawaan mysql library nya Ada error terus ada result nya Apa hasilnya Sama ada field Fieldnya apa aja Tapi kita gak akan pakai parameter ketiga Karena kita cuma butuh resultnya doang Terus kita bikin disini sama dengan Lebih dari Yang kalau di gua bakal jadi panah kayak gini Sama dengan lebih dari ya bro ya Nanti bakal jadi seperti itu Yang artinya ini Raw function di javascript ES6 Standardisasi codingan di javascript Yang lebih mudah kurang lebih gitu Disini kita lakukan console.log aja dulu Console.log Hasil database Terus kita kasih gini Koma Console look fungsinya untuk apa bang? Console look itu untuk munculin output ke terminal lo gitu ya Kalau di sisi server side Terus gini tinggal ketik result Result dulu aja kayak gini Kalo udah kita save Kita coba buka lagi Ya kita coba buka lagi Matiin dulu Terus kita running lagi Ada? Udah ada ya Muncul ID 1, 4, 5, 6, 7, 8, 9, 10 Nih udah muncul ya Kalian bisa liat disini Yang kalian udah muncul belum bro? Muncul dong masa gak muncul Baru sampe sini aja udah error Nih 1, 4, 5, 6 udah sesuai ya Sesuai muncul sama yang kayak disini bro Step berikutnya Sabar dulu gue mau sebat dulu Gue pause dulu OBSnya bentar Oke lanjut lagi ya Tadi udah sampai mana? Sampai console log Udah muncul seperti ini Kita coba munculin hasil ini Ke bagian depan Kesini misalnya Maka Aduh mouse gue basah anjir Maka ini harus dimasukin ke dalam Sini Ini di cut aja Ini di cut masukin ke dalam Sini ya ini result ini kita coba keluarin sini apakah bisa atau enggak ya res.send result gini coba save dulu terus ini cancel nyalain lagi ya cek abs takutnya belum running, oh running aman kita buka browser buka ada tuh ada ya ada di sini tapi tapi di konsol tadi kan agak ngeri ya di konsolnya tuh ada raw data paket kayak begini ya gak sih?

di lu ada juga gak? kalau di gua kan ada nih, jadi agak sedikit mengerikan maka kita parse dulu bro disini kita parse dulu ya resultnya kita bikin disini const user sama dengan users lagi nih json.parse di dalam kurung kita stringify kan json.stringify result gini bro disini kita panggilnya tuh user Jadi awal kali hasil keluaran dari MySQL data yang ada di database ke console.log ini Itu adalah munculin ada row data paket kayak beginian Kayak males aja gue liatnya gitu loh ya Walaupun sebenernya pas ke depan itu udah kayak gini udah aman udah bisa consume kita Tapi gue gak mau gue pengennya yang ada di terminal juga hilang gitu Maka kita pindahin ini kesini Sorry ke bawah terus resultnya ganti jadi users Karena kita udah reformat Resultnya udah di format ulang supaya jadi result yang seperti yang ada di depan gitu loh ya Kita coba matiin terus nyalain lagi Nah kan hasil dari database langsung array plus object Udah gak ada row data paket, row data paket lagi Ya bro bener kayak gini Kalo udah kayak gini lebih enak lagi Nah supaya bisa masuk ke HTML, ke tampilan HTML Kita butuh yang namanya template engine bro Kita bakal pake yang namanya EJS Kita install dulu ya, ini matiin NPM spasi I spasi EJS EJS itu template engine Buat yang belum tau template engine itu apaan Kurang lebih gimana caranya supaya data ini bisa dilempar jadi HTML dan dipake di HTML nanti Oke kita bikin satu folder baru disini Folder view Views Terus kasih aja di dalamnya Index.ejs Nah index.ejs ini kurang lebih HTML nya ya bro ya HTML yang berformat lain tapi bukan bukan index.html tapi index.ejs tapi isinya tetap HTML juga kalian ketik aja tanda seru tab kayak gini HTML standar alright disini kasih nama dia tutorial dia code tutor node nah ginilah 1 misalnya disini kita kasih dulu h1 testing kayak gini alright untuk di index.ejs di dalam folder views karena tadi kita udah install ejs nya maka di dalam package json bakal ada Dependency baru ini nih EJS Express MySQL Ada 3 Karena kita udah nginstall 3 biji itu tadi ya kan Sekarang tugas kita adalah Gimana caranya supaya si index.ejs ini bisa nerima data dari si Yang ada disini Yang ada di app.get kita Routes utama kita di API Ini tuh kayak API gitu ya Sekarang kita coding di bagian sini App.set Oke Set views, views views, gini fungsinya apa bang? untuk ngasih tau bahwa template HTML kita ada di folder views views nya ada di folder views nah ini tuh template engine nya ada di views, gitu loh ya terus kita declare lagi disini satu app.set view engine nya itu pake apa koma, karena kita tadi pake ejs, maka disini ketik aja ejs alright, jadi kita pake EJS sebagai template engine Dan di setup cuman kayak gini doang Set view engine nya sebagai EJS Terus set dimana Directory untuk HTML Itu berada View nya directory Si template engine nya ada di folder views Index.ejs kurang lebih kayak gitu udah udah udah belum kalau udah kayak gini sekarang kita kirim ke depan dengan cara ini diganti jangan res.sen tapi jadi res.render karena kan kita mau render ke HTML ya bro ya res.render kemana yang mau di render ini kan kita baru ngasih tahu bahwa folder template engine itu ada di fuse dan disini dikasih tahu nih kita harus ngasih tahu kemana filenya filenya ke index Udah, gak perlu kasih.ejs karena tadi kita udah declare di atas bahwa view engine-nya adalah ejs Jadi udah kayak gini doang Apa yang dikirim?

Yang dikirim adalah, pake kurawal ya bro, biar jadi objek Yang dikirim adalah data users User, isinya itu apa? Isinya itu yang ada disini Tadi mana? User, nah ini, ini kita kirim ke depan Jadi kita kirim disini, users Oke, kurang lebih seperti ini Kalau udah kayak gini, maka kita masuk ke index.ejs kita cobain disini panggil ya panggil dulu disini pakai cara yang sederhana dulu cara sederhana dulu bentar ya server.js nya nah ini nih ini kita kasih lagi satu satu data title titik dua dia code tutorial misalnya gini title ya yang dikirim title dan user jadi kita ngirim dua parameter dua data data users dan data title data title value nya adalah dia code tutorial Maka disini kalau pengen manggil itu Yaudah testing ini kita ganti Cara manggil EJS nya Cara manggil si data yang ada di backend Ini kan kita gak ada import-import disini di HTML doang loh ya Bisa manggil data Jadi disini pake yang namanya kayak beginian Kayak PHP gitu bro Ya kalau PHP kan gini Ya kalau di kita kayak gini Terus disini pake kurawal Kayak gini aja Terus kita coba panggil yang tadi itu namanya title. Gini kan bro ya. Betul.

Kita coba save dulu. Terus kita coba running. Apa benar atau enggak gue.

Gue juga agak lupa sih. Kita coba. Hasil database udah oke. Kita buka browser.

Kita refresh. Kagak muncul. Berarti salah pemanggilannya bukan pake kurung. Tapi gini doang udah. Udah kayak gini doang ya.

Title. Mungkin. Kita running ulang.

Hai es Allah right kita buka browser lupa sama dengan disini harus pakai sama dengan ya save kita running lagi Oke kita buka browsernya refresh dia kode tutorial Alright data ini ada dari back and masuk ke front-end kalau kita inspect elemen apa yang terjadi Bang ya sama aja Bro kayak Tuh kayak gini jadinya ini kan tapi data dari backend ya kurang lebih kayak gitu Alright sekarang kita lanjut lagi Untuk memunculkan data yang ada di user Data user tadi yang ada di database kan udah ada disini nih User Kita udah kirim juga Kita tinggal panggil bro disini Dengan cara div Div atau ul ya Div lah div dulu boleh lah ya Div Terus kita masukin ul disini Disini li Nah Ayo kita bakal looping si li nya berarti cara looping adalah disini persen Oke kita tutup persennya susah sih memang ribet-ribet beginian ya Bro kita ketik ke for untuk pengulangan dalam kurung dalam kurung ya kulung lagi anjing let kita kasih data dulu user in users karena tadi kan disana namanya users terus gua perkecil jadi user untuk mapping data ya terus kita kasih kurawal nah disini kurawalnya gak boleh disitu bro harus di luar kurawalnya mesti disini jadi kita tutup lagi disini nah gitu ya kayak php lah sama kayak kalau laravel tuh ada template engine juga kan ada blade ada jet ya bisa pake segala macem gitu kan disini kita panggil juga sama kayak tadi press pake sama dengan kalau single datanya pake sama dengan user.nama tadi kan datanya ada apa namanya nama sama kelas nih nama sama kelas maka disini user.nama tutup strip aja anjing susah ngetiknya memang ini bro user.kelas tutup kita save dulu terus kita coba refresh Apakah sudah berhasil atau enggak nodeserver.cs data masih ada aman ya kita coba refresh kagak muncul berarti gua salah manggil bro bentar kita troubleshooting dulu ya let user in bukan in sih kayaknya tapi off bukan in ya tapi off sorry salah bukan in tapi off kalau tadi kan in ya kita ganti jadi off harusnya sih off apa in ya kalau di python kan in kita coba save agak sedikit sedikit lupa sintaks bro mau dimaklum ya kalau udah di running ulang terus kita coba refresh Sudah muncul kalian bro? Ada disini datanya sesuai ya Rudiansah, ada Aryawan, ada Anugrah, Sandi dan segala macemnya Sesuai seperti yang ada disini Tuh, Rudiansah, Aryawan, segala macemnya Ini baru select data Sekarang kita bakal coba untuk modifikasi dulu Tampilannya supaya lebih indah gitu Kita pake bootstrap dulu ya Bisa kok bisa pake bootstrap itu bisa Karena ini kan HTML-HTML juga bro ya Jadi bisa dimasuk-masukin terserah kalian Oke, tinggal di kopas aja. Lo buka bootstrap documentation. Kopas yang CSS ini.

Masukin ke bagian head sini. Terus satu lagi. Yang bagian bundle ini. Kopas masukin ke atas slash body.

Eh sorry, disini nih. Tempel. Udah, kurang lebih kayak gitu.

Terus kita, yang ini kita pakein jadi tabel bro. Kita jadiin tabel. Jangan Ul kayak gini kan jelek ya. maka div ini kita kasih kelas dulu kelas container biar dia agak mojok ke tengah terus yang title kita masukin disini jadi kurang lebih kayak begini nih apaan anjir nah div h1ul div seperti ini bodinya mana ya tadi bodinya ketutup keilang bodinya salah Hai Sorry body ini apa dah daya nah seperti ini ya div class container kita coba running ulang aman gak bootstrap nya ya untuk mencoba dulu sering ada kalau ada harusnya dia mojok ke tengah mojok tapi ke tengah gitu loh Nah berarti udah terinstall bootstrapnya ya Sekarang kita pake ini, ini tabel yang ada di bootstrap Buku aja lah Sini cari yang namanya tabel Di bagian mana gue juga gak tau Tunggu, konten Tabel, nah ini nih Kita pake yang ini aja Caranya, supaya gak pusing dulu ya Kopas aja ini Kopas Masukin ke bawah sini Oke Terus kita ganti iniannya Jadi ID Terus ini jadi nama Ini jadi kelas Ini gak ada Karena datanya kan cuma itu Ini hapus Terus Ini biarin dulu yang atas Supaya nanti kita bisa timpa Ini semua tr nya kita hapus Kecuali sisain satu doang ini Dan td nya juga kita hapus Sisain kayak gini Terus ini kita kopas bro Nah Ini dari sini ya. Shred.

Dari 4 itu kita kopas. Masukin ke sini. Right. Terus li nya diganti pake TH.

Samain kayak yang ini nih. TH scope sama dengan row. Nah udah kayak gitu.

Ininya juga jangan lupa. Tutup belakangnya TH juga. TH ini kita hapus.

Udah. UL ini kita hapus. Udah. Sekarang kita format ulang supaya lebih bagus Pretier gue mana anjing Pretier Gak berfungsi Pretiernya gak apa-apa lah Gini ya pokoknya mah Terus kita coba buka lagi Apakah yang terjadi Running ulang Kalau kalian bingung di replay aja videonya di back-back dulu Karena takutnya kecepetan ya kan Nah Ada yang salah sepertinya ya Harusnya di TD bukan di TH bro Salah looping Kenapa?

Karena ternyata Gue lupa Sorry bro Lupa Ini bukan di strip kayak gini Tadi tuh udah bener ya Kita ctrl z lagi Tadi udah bener bro Udah bener itu Gak perlu pake THTH Di luar Biarin aja THnya disini Sampai kayak gini ya Sorry Tadi anggap aja gak ada videonya Ini hapus Ini hapus Yang ini biarkan nama Yang ini biarkan Apa namanya Kelas Nah gitu maksud gue Satu lagi ID ya, yang ini ganti jadi ID Oke, begini Ada nama, ada ID gitu loh Ada nama, ada ID, ada kelas Kita save Tadi salah, tadi tuh harusnya Karena ini kan TH-nya ada 3, maka disini TH-nya ada 3 juga Dan udah di looping gitu bro Udah di looping datanya di dalam user Maka ketika gue panggil user.id, user.nama, user.kelas Itu bakal nge-looping masing-masing semuanya Kita coba running ulang ya buka lagi, kita refresh what the f... ada yang lupa lagi mohon dimaklum, masukin tr nya ke dalam sini masukin ke dalam sini tr nya ya, lupa bro sorry, maklum udah, coba save lagi terus di nyalain ulang terus dibuka browsernya, udah berubah ya, aman id 145678910 bla bla bla bla bla ya, udah sesuai sekarang kita ganti titlenya Hai jadi daftar murid misalnya gitu sini titelnya misalnya bukan dia tutorial ya daftar murid daftar murid daftar murid kelas right terus disini berarti kita jangan H1 lah kegedean H2 aja atau H3 dah ya div ini ada the head hai hai Hai dikurang menjerok ke dalam sepertinya nah biar lu pada nggak pusing Bro mitabula Sigo udah mulai hancur nih udah seperti ini ya kita coba refresh lagi kita cek daftar murid kelas aman ya cukup enak cukup aman supaya nggak pusing kita nyala matiin nyala matiin mulu gitu kita install yang namanya no demon bro ya kita cancel dulu ini npm i spasi min min safe no demon Gini ya bro, untuk install library supaya kita gak perlu menyala matiin lagi si servernya Biar dia nyala otomatis ketika kita reload dan segala macem ya Dan kalau udah terinstall nanti bakal kayak gini kurang lebih tampilannya ya Terus kita mesti cek di bagian package.json Sudah ada disini di dependency, nambah baru ya nodemon Dan kita tambahin di bagian script ya Untuk penjelasan script udah gue jelasin di video gue sebelumnya yang di tutorial react.js gitu ya Kalian ada tuh di apa tuh namanya bikin bikin website film itu gue jelasin panjang lebar seputar script ini jadi bisa dicek di sana kita bikin start di sini terus kita kasih disini nodemon server.js ya terus kasih koma jadi kita coba running sekarang cara ngerunningnya tinggal npm start dah muncul ini kita nggak perlu mati nyala mati nyala lagi udah otomatis kalau kita ngerubah codingannya ya kayak itu lanjut lagi Hai yang belum ada adalah forum untuk kita tambah data ya Bro ini kan baru ngeget data yang ada di database kita cobain tambah-tambah data langsung dari database dulu direct ya ini kan masih ada 10 nih Junaidi terakhir kita coba tambah insert lagi disini insert misalnya Jojo di sini Jojo Harry misalnya gini kelasnya misalnya if1 terus satu lagi di sini misalnya namanya Daud Hanif misalnya if 4 misalnya terus kita Insert Oke udah terinsert terinsert lagi udah terinsert terus kita refresh ini kan ada 10 ya kita refresh eh belum dinyalain udah nyala belum sih udah kan loh kok nggak berfungsi sih ya elah Oh bentar harus di restart dulu karena itu kan database ada yang di koprek ya bukan codingan kita jadi kita restart dulu nah udah ya 11 12 oke Lanjut lagi, lanjut lagi, lanjut Kita cari dulu di bootstrap untuk forum-foruman Nah ini ada forum, terus kita cari yang overview aja Yang paling simple, layout, ini boleh ya Kita ambil sampai email dan passwordnya doang Email dan passwordnya doang, sampai sini nih Shred, udah Kita copas ke bagian bawah sini Di bawah table ya Kita copas disini Terus kita masukin forum Ini kan divnya belum ketutup Ini div ini Ini div ini Ini forumnya harus ditutup No Tutup forumnya ya Dikurang lebih Kayak gini Forum dari bootstrap Kita save dulu Kita coba lihat Kok kayak gak auto reload sih ini Oh udah auto reload aman Gak perlu dimatiin ya Maksudnya servernya gak perlu dimatiin Oke Udah Kasih ciri disini di bawah sini bolehlah H2 atau H3 gitu tambah murid tambah murid baru oke terus tambahin button satu di bagian bawah sini button oh input type aja deh input type button ya input type button terus kelasnya BTN BTN primari aja atau denger boleh Hai denger bolehlah kini value-value nya adalah tambahkan kalau di save terus kita cek lagi di browser maka dadanya tambahkan ya cuman ini kegedean Bang Iya karena gua jumlahnya kan bener-bener ngejum banget bro Hai nah kayak gini ya tambah murid baru Oke email passwordnya kita ganti jadi sesuai seperti yang ada database kita ada nama ada kelas ya kita ganti inputnya bukan email tapi teks input yang bawahnya juga teks terus id-nya itu kita hapus aja karena kita enggak butuh ID di sini hapus aja terus value yang email ganti jadi nama lengkap terus yang password jadi kelas for nya itu kita bolehlah for nya diisi ini kelas ini nama input type text kelas forum kontrol di sini kita tambahin name nama input type text name nama ya untuk ditangkep nanti di sini input type text name kelas Nah dua ini name ya sama kayak di anak-anak PHP gitu ya Name ini untuk ditangkep disana sebagai variable gitu ya Sebagai parameter Name, nama, sama name, kelas Inputan namenya gitu Kalau udah di save jangan lupa Disini kita tambahin action Menuju ke slash Slashnya itu tambah misalnya Atau slash add atau slash tambah boleh lah Oke metodenya kita kasih pause Supaya secure ceritanya gitu Kalau udah kita cek lagi Udah berubah nama lengkap dan udah berubah kelas Oke sekarang kita bikin sebuah API baru disini Di server.js balik lagi kesini ya Sekarang kita bikin untuk nge-insert data Disini kita enter-enter supaya gak pusing ya Ini untuk kita kasih comment Untuk get data Disini kita kasih comment untuk insert data coding-nya sama kayak yang itu aja, app.post tapi nya parameternya, yang slash nya itu yang tadi, tambahkan sesuai seperti yang ada di index.js nya action nya kan ke slash tambah, oh slash tambah maka disini bukan tambahkan tapi slash tambah gini, terus samain aja sisanya mah request, respon terus sama dengan lebih dari, maka jadi panah kalau di gua nah kita bikin satu variable baru disini, const misalnya insert sql Insert SQL sama dengan Codingannya kurang lebih kayak Insert into Nama tabelnya user Apa aja yang di insert Yang di insert adalah nama dan kelas Valuesnya itu apa aja Terus Kalau udah kayak begini kita eksekusi db.query Insert SQL R Sama apa lagi tadi tuh ada resultnya Tapi sebenernya kita gak akan pake resultnya Samain aja ke yang atas bro Ini kita mesti nangkep data Nangkep data dari yang hasil kita ketik disini kan name Nama inputannya tuh nama sama kelas ya kan Kita harus ngambil ini data ini Caranya gampang Disini di values kita langsung hardcode aja Kita langsung panggil langsung disini Kan disini gue pakenya tuh curc ya gini backtick ya bukan pakai string yang seperti yang di atas kalau ini kan string nah ini kan string kalau ini gua nggak string tapi pakai ini jadi value nya bisa dimasukin disini bro pakai dan kurawal kayak gini oke pakai kurawal reg.body.name satu lagi koma reg.body.class oh bukan name itu nama tadi kan parameter inputnya nama ini class Jangan lupa dikasih curah disini ya. Kasih string satu gini.

Karena ini query SQL. Ini juga. Ini juga.

Nah. Kalau udah kayak gitu disini. If R seperti biasa. Draw R Gini Kalau berhasil maka. Res.redirect ke slash doang.

Udah. Hai gini aja dulu bro sebelum kita testing kita harus masukin dulu yang namanya body parser karena ini metodenya pos ya kita masukin disini body parser body parser sama dengan require body body parser dan kita harus install ini juga bro ya save dulu kita install matiin dulu NPM i body parser seperti ini hai hai kita tungguin kalau udah kita tinggal masukin di sini app.use bodyparser.url encode dalam kurung eh dalam kurung apa ya dalam kurung bener ya kurawal extended true udah ini format standar untuk menerima form input gitu ya yang metodenya pos pakai bodyparser terus kita coba running lagi ini codingnya udah udah oke aja nih harusnya nih segini ya udah bisa nge-insert harusnya kita coba running NPM start terus kita coba browsernya di refresh kita coba tambah data deden gogo gogo gogo if sembilan if-5 if-3 dah tambahkan Oh sebentar berarti harus ada yang kita ubah di bagian button karena dia tidak berinteraksi ini ternyata nih harus submit tipenya bro bukan tipe buton gitu ya karena ini kan di dalam form sekarang kita coba refresh lagi browsernya Kita tambahin tadi siapa? Deden Golang lah gini Deden Golang IF3 Kayaknya udah tadi 3 kali gagal sekarang berapa kali gagal Tambahkan Oke refresh Kok gak muncul ke database kita cek dulu Deden Golang ada disini tapi disini gak ada Oke kita modifikasi sedikit karena ini ada satu yang bermasalah Gini ya Ini kan kita query dulu baru masuk ke get Kita keluarin bro Kita keluarin app get ini Ya Ayo kita masukin DB query ini mana nih ini kita keluarin sini oke si pos juga ini kita keluarin masukin sini segini si DB query ini nah ini kan query-query ya nih ini tuh ada di dalam harusnya Hai ini mah yang ada di dalam get Bro di dalam sini get nah ketika get maka DB query SQL SQL nya ini dimasukin ke sini jadi masing-masing yaitu kita sedikit touch up supaya lebih indah lagi jadi ketika slash maka akan nge-select from terus DB query nya seperti ini lanjut-lanjut seperti biasanya kita hapus-hapusin console.log nya ya mana console.log ini hapus karena udah yakin enggak ada lagi console.log harusnya console.log Nah kecuali yang ini aja database connected Jadi kalau gue baca lagi nih ya Kalau gue baca lagi dari awal Kita punya 3 library Terus kita udah set juga template engine nya disini Body parser untuk nge-post from From lagi form Supaya bisa ditangkep hasil inputannya Terus db connect ini untuk koneksi ke database nya Dan di dalamnya kalau error maka bakal nge-throw error Tapi kalau enggak maka bakal bisa nge-eksekusi yang slash ini Routes utama kita Untuk nampilin segala macam data user Ya Nah yang ini dbquery mengeksekusi query untuk user select, select user gitu, from ya, select bintang from user.

Nah ini kan dbquery-nya ini nih, ini res.render kita masukin ke atas. Nah kayak gini ya. Oke ini satu blok untuk get data, yang ini satu blok untuk nge-post data. Sekarang kita save, kita running lagi.

NPM start. agak sedikit belibet memang database connected udah ini finishing ya kita kesimpulan kesimpulannya udah ready atau belum ini refresh datanya ada 15 dan apakah sekarang udah lebih oke lagi namanya saya diafriza kelasnya if1 tambah sekarang udah realtime hah anjir ya bukan realtime sebenarnya tapi intinya langsung masuk sana gitu loh ya misalnya disini jajang Nur jajang Nur if3 Kita tambah langsung jajang nur masuk sini ya Kalau kita refresh-refresh pun aman Karena di database pun sudah bertambah banyak gitu So kurang lebih kayak gitu aja Semoga video ini bermanfaat bagi kalian semua yang lagi belajar javascript Di backend ataupun di frontend ya Sampai jumpa di video berikutnya Bye bye

Transcript for:Koneksi JavaScript dan MySQL dengan Node.js

Transcript for:
Koneksi JavaScript dan MySQL dengan Node.js