CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3 - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel crud nodejs mongodb,
Artikel crud nodejs mongodb bootstrap,
Artikel membuat crud dengan nodejs dan mongodb, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3
link : CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3
Pada tutorial sebelumnya kita sudah membuat database mongodb dengan nama database "universitas" dengan collection adalah "mahasiswa" dengan isi "nim, nama, email, dan phone". Sekarang adalah mengkonfigurasi agar database dapat berinteraksi atau terkoneksi dengan nodejs app kita.
Buka atom editor anda, atau bisa mengetikan pada terminal "atom" kemudian tambahkan project folder crudapps pada atom anda
File config.js akan mendefinisikan url database berjalan dan port yang digunakan, nantinya file config.js tersebut akan di panggil di file app.js. Bisa kalian lihat pada line 3, adalah nama database "universitas" yaitu database yang sudah kita buat sebelumnya.
Selanjutnya buka file app.js pada atom editor anda kemudian ubahlah code nya menjadi seperti berikut :
Penjelasan code per line :
Penjelasan kode :
Lihat kode line 4 anda melihat get('/' hal itu agar ketika kita menjalankan server localhost:3000 maka langsung diarahkan ke routes index.js
Kemudian buatlah pada folder routes dengan nama mahasiswa.js dengan code sebagai berikut
Penjelasan Code :
Selanjutnya membuat folder layouts di folder views, dan tambahkan file header.ejs dan footer.ejs
Langkah selanjutnya adalah membuat folder mahasiswa di views folder dan tambahkan code untuk menambah mahasiswa yaitu add.ejs
Buat juga membuat form edit data yaitu edit.ejs
Terakhir kita buat listmahasiswa.ejs untuk menampilkan semua data mahasiswa
Sekarang ketikan "nodemon" pada terminal anda, ketika server sudah berjalan silahkan test aplikasi pada "localhost:3000" Jika anda berhasil anda akan melihat tampilan seperti berikut
Download Project : https://github.com/banyucenter/crudnodejsmongodbbootstrap
Anda sekarang membaca artikel CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3 dengan alamat link https://dev-create.blogspot.com/2020/03/crud-node-js-mongodb-dengan-bootstrap_9.html
Judul : CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3
link : CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3
CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3
Pada tutorial sebelumnya kita sudah membuat database mongodb dengan nama database "universitas" dengan collection adalah "mahasiswa" dengan isi "nim, nama, email, dan phone". Sekarang adalah mengkonfigurasi agar database dapat berinteraksi atau terkoneksi dengan nodejs app kita.
Buka atom editor anda, atau bisa mengetikan pada terminal "atom" kemudian tambahkan project folder crudapps pada atom anda
Nah anda sudah memiliki struktur folder aplikasi webapps tersebut. Sekarang anda membuat file config.js pada root folder (maksudnya adalah file tersebut berada pada folder crudapps) bukan didalam folder bin dan sebagainya. Anda juga bisa membuat file secara labgsung pada terminal dengan mengetikan "touch config.js" sehingga anda memiliki sebuah file baru dengan nama config.js.
Selanjutnya buka file app.js pada atom editor anda kemudian ubahlah code nya menjadi seperti berikut :
Penjelasan code per line :
- Line 1-2 Memanggil express modul
- Line 3 Memanggil modul morgan yaitu modul yang berfungsi sebagai pencatat setiap request ke server. Biasanya dikenal dengan istilah logging pada terminal.
- Line 4 memanggil modul path dimana nantinya kita bisa memanggil path tertentu misal saya menggunakan path dengan nama public yang akan digunakan untuk memasang css atau bootstrap
- Line 6 - 13 memanggil konfigurasi mongodb database yang sudah kita definisikan sebelumnya pada file config.js
- Line 18 memanggil modul ejs yaitu templating yang akan kita gunakan saat membuat tampilan web html dengan extensi .ejs.
- Line 24 - 26 secara default express framework menyediakan routes untuk indexroutes dan userroutes. nah pada tutorial kali ini kita membuat sebuah route baru atau link baru dengan nama mahasiswa.
- Line 31 -32 memanggil modul form validasi. Misalkan form yang diinputkan harus diisi atau tidak kosong, sebenarnya bootstrap sudah menyediakan juga sih hehe.
- Line 39 - 46 memanggil body parser fungsinya adalah meng-ekstrak semua data yang datang dari request, cara mengakses data tersebut adalah dengan menggunakan req.body
- Line 53 - 68 memanggil method override Mengganti metode permintaan berdasarkan header X-HTTP-Method-Override atau parameter permintaan / pos khusus.
- Line 78 memanggil modul flash yaitu semacam flash text untuk informasi.
- Line 79 memanggil modul cookie parser
- Line 80 memanggil modul express session
- Line 82 -89 jalankan flash, cookie parser dan session
- Line 95 panggil path public yang didalamnya kita taruh bootstrap
- Line 98 membuat url routes untuk link mahasiswa
- Line 117 export modul app.js
Jika kalian cek kembali pada app.js line 24 dan 97 kita membuat sebuah routes index bukan, nah sekarang buka folder routes/index.js ubah codenya menjadi sebagai berikut
Penjelasan kode :
Lihat kode line 4 anda melihat get('/' hal itu agar ketika kita menjalankan server localhost:3000 maka langsung diarahkan ke routes index.js
Kemudian buatlah pada folder routes dengan nama mahasiswa.js dengan code sebagai berikut
Penjelasan Code :
- Line 5 - 22 membuat fungsi get all data pada collection mahasiswa
- Line 11 & 16 adalah path pada views yang dirender maksudnya data keseluruhan dari collection mahasiswa ditampilkan pada file di folder views/mahasiswa/listmahasiswa.ejs
- Line 24 - 33 membuat fungsi navigasi ke form tambah mahasiswa dengan menggunakan file form yaitu file di folder mahasiswa/add.ejs. Jadi ketika anda memilih link add atau tambah yaitu "localhost:3000/mahasiswa/add" akan diarahkan ke form add.ejs
- Line 36 - 92 membuat form action, jika kalian terbiasa dengan form action pada php pasti hal ii mudah dipahami. form action berfungsi mengeksekusi code tertentu misalkan post data / update /delete data. Nah pada kode ini adalah untuk post data ketika menambah mahasiswa.
- Line 94 - 118 membuat navigasi edit data berdasarkan id yang dipilih
- Line 120 - 180 membuat update form action berdasarkan id
- Line 183 - 196 membuat fungsi hapus data berdasarkan id
Agar lebih menarik kita ubah halaman index.ejs menjadi seperti berikut
Kemudian pada folder public/stylesheets buat file baru dengan nama cover.css
Selanjutnya membuat folder layouts di folder views, dan tambahkan file header.ejs dan footer.ejs
Langkah selanjutnya adalah membuat folder mahasiswa di views folder dan tambahkan code untuk menambah mahasiswa yaitu add.ejs
Buat juga membuat form edit data yaitu edit.ejs
Terakhir kita buat listmahasiswa.ejs untuk menampilkan semua data mahasiswa
Sekarang ketikan "nodemon" pada terminal anda, ketika server sudah berjalan silahkan test aplikasi pada "localhost:3000" Jika anda berhasil anda akan melihat tampilan seperti berikut
Download Project : https://github.com/banyucenter/crudnodejsmongodbbootstrap
Demikianlah Artikel CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3
Sekianlah artikel CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3 kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel CRUD Node Js MongoDb dengan Bootstrap studi kasus data mahasiswa Part 3 dengan alamat link https://dev-create.blogspot.com/2020/03/crud-node-js-mongodb-dengan-bootstrap_9.html
