Setelah berhasil membuat controller, models dan routes pada tutorial sebelumnya, maka selanjutnya adalah membuat template htmlnya. Template html tersebut akan disimpan dalam ekstensi ejs. Kita akan berlatih membuat tampilan web sederhana dengan bantuan bootstrap.
Baca Sebelumnya - CRUD Dengan ExpressJS & Mongoose Part 4 : Routing
Baca Sebelumnya - CRUD Dengan ExpressJS & Mongoose Part 4 : Routing
Bootstrap adalah framework css yang mampu membantu proses pembuatan tampilan web menjadi lebih cepat dan rapih. Bootstrap saat ini menjadi framework css yang sangat terkenal karena dokumentasinya yang lengkap dan mudah dipelajari. Kita bisa mendownload bootstrap pada https://getbootstrap.com/
File yang telah kita download tersebut kita extract. Setelah itu rename folder hasil extract tadi jadi 'bootstrap' saja, Kemudian copykan pada folder public.
Selanjutnya kita akan membuat dua buah file ejs, yaitu pegawai.ejs, kecamatan.ejs Kedua file tersebut berisi form untuk menambahkan data pegawai dan kecamatan. Perlu diingat bahwa file berformat .ejs wajib disimpan di folder views. sebelum membuat 2 file tersebut edit dlu index.ejs yg sudah ada saat instalasi.
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/bootstrap/css/bootstrap.min.css'>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
pegawai.ejs
kecamatan.ejs
Beberapa file sudah kita buat, sekarang kita akan menjalankannya. Ketikan perintah pada terminal "npm start". Tunggu hingga server NodeJS berjalan.
Jika sudah berjalan silahkan akses halaman localhost:3000/kecamatan. Lakukan input nama kecamatan lalu simpan.
Jika kalian mengikuti proses pembuatan dengan benar maka data akan tersimpan di database. Cara ceknya silahkan buka mongodb seperti perintah dibawah,
Baca Juga : Cara membuka MongoDB lewat CMD
Setelah itu kita coba yang pegawai dengan mengetikan alamat localhost:3000/pegawai maka kita akan dihadapkan pada form input pegawai.
Bisa dilihat pada gambar diatas, kita bisa memilih beberapa kecamatan yang sudah kita inputkan di form kecamatan. Masukan sebuah data pegawai tekan tombol submit maka data akan masuk pada database. silahkan cek kembali di database mongodb nya.
Baca Selanjutnya - CRUD Dengan ExpressJS & Mongoose Part 6 : View Data
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/bootstrap/css/bootstrap.min.css'>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<form action='pegawai/tambah' method='post' role='form'>
<div class='form-group'>
<label for='exampleInputEmail'>Nama</label>
<input type='text' name='nama' class='form-control' placeholder='Enter Nama' required>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Email</label>
<input type='text' name='email' class='form-control' placeholder='Email' required>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Umur</label>
<input type='number' name='umur' class='form-control' placeholder='Umur' required>
</div>
<div class='form-group'>
<label for='exampleInputEmail'>Kecamatan</label>
<select type='text' name='id_kec' class='form-control' required>
<% for(var i = 0; i < kecamatan.length; i++){ %>
<option value='<%= kecamatan[i]._id %>' ><%= kecamatan[i].nama %></option>
<% } %>
</select>
</div>
<button type='submit' class='btn btn-primary'>Submit</button>
</body>
<script style='javascript' src'/bootstrap.min.js' >
</html>
kecamatan.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel='stylesheet' href='/bootstrap/css/bootstrap.min.css'>
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<form action='kecamatan/tambah' method='post' role='form'>
<div class='form-group'>
<label for='exampleInputEmail'>Nama</label>
<input type='text' name='nama' class='form-control' placeholder='Enter Nama Kecamatan' required>
</div>
<button type='submit' class='btn btn-primary'>Submit</button>
</body>
<script style='javascript' src'/bootstrap.min.js' >
</html>
Beberapa file sudah kita buat, sekarang kita akan menjalankannya. Ketikan perintah pada terminal "npm start". Tunggu hingga server NodeJS berjalan.
Jika sudah berjalan silahkan akses halaman localhost:3000/kecamatan. Lakukan input nama kecamatan lalu simpan.
Jika kalian mengikuti proses pembuatan dengan benar maka data akan tersimpan di database. Cara ceknya silahkan buka mongodb seperti perintah dibawah,
Baca Juga : Cara membuka MongoDB lewat CMD
C:\Users\RSAM>cd ../../mongodb/bin
C:\mongodb\bin>mongo
> use crud_pegawai
switched to db crud_pegawai
> db.kecamatans.find()
{ "_id" : ObjectId("5e88927247b4282bb87ae9fa"), "nama" : "Lembursitu", "__v" : 0 }
Setelah itu kita coba yang pegawai dengan mengetikan alamat localhost:3000/pegawai maka kita akan dihadapkan pada form input pegawai.
Bisa dilihat pada gambar diatas, kita bisa memilih beberapa kecamatan yang sudah kita inputkan di form kecamatan. Masukan sebuah data pegawai tekan tombol submit maka data akan masuk pada database. silahkan cek kembali di database mongodb nya.
Baca Selanjutnya - CRUD Dengan ExpressJS & Mongoose Part 6 : View Data