Membuat Menu list dropdown dinamis

Baca Juga

Selamat weekend sobat sobat, sambil mengisi waktu di hari libur saya buat update blog untuk membuat value opsi dropdown dihandlebars & bootstrapt yang sebenarnya  artikel ini adalah bagian dari lanjutan pekerjaan (ehm.. maksudnya hobi) pembuatan user interface untuk raspberry pi saya,

Umumnya pembuatan dropdown list ini bisa dibuat statik namun kita yang menghendaki opsi value yang dinamis juga bisa dilakukan. Karena sifatnya dinamis jika ada perubahan bisa langsung update di menu list dropdown nya tanpa harus membuat list atau otak atik lagi secara manual di script. (kalau kelamaan saya kdang udah gk inget lagi..hehe)

Handlebars sendiri adalah sebuah template yang umum bekerja di node js, template ini memudahkan untuk kita mendesign layout dari sebuah halaman website, banyak tutorial dan artikel yang membahas mengenai handlebars.

Berikut ini ada potongan script yang penulis gunakan dalam pembuatan user interface yang bisa dijadikan referensi tambahan bagi sobat yang  ingin mendesign sebuah dropdown list.

 

File ext.hbs

<<div class="form-group">

                  <label class="control-label" for="title">Pilih sensor:</label>
                    <select class="form-control" name="pilihsensor" title="Pick a number">
                        <label class="control-label" for="title">Pilih:</label>
                                {{# each pilihsensor }}
                                    <li><option> {{ this.namasensor }} </option></li>    
                                {{/each}} 
                    </select>                                              
    </div>

 

 

  
File javascript untuk merender handlebars

//Render
router.get('/indexdaftarsensor', isLoggedIn, function (req, res, next) {
  var results=
[{
namasensor:"DHT11"
},
{
    namasensor: "PH Kontrol"
},
    {
 namasensor:"LDR"}
]
          res.render('iot/indexdaftarsensor', {
            pilihsensor:results,
            halo: req.user  
    });
});

Jika sobat ingin value list diambil dari database:

router.get('/indexdaftarsensor', isLoggedIn, function (req, res, next) {
   Sensor.find( function (err, results) {
        if (err) {
            return res.write('Error!');
        }
    res.render('iot/indexdaftarsensor', {
            pilihsensor:results,
           halo: req.user
    });

Semoga bermanfaat, oh ya tambahan semua pemangilan ke database kedepannya akan di buatkan promise.