Membuat Aplikasi GUI Berat Badan Ideal Menggunakan BAIK-Lang

<p><b>Membuat Aplikasi GUI Menggunakan BAIK-Lang -</b> Salah satu hal yang menyenangkan saat membuat aplikasi adalah ketika aplikasi yang kita buat mempunya sebuah desain visual. Desain visual dari sebuah aplikasi disebut juga <b>Graphical User Interface</b> atau yang biasa disebut GUI. Namun istilah GUI biasanya cuma digunakan dalam aplikasi Desktop.</p><p></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZJfnqQZ5HQiblSXsSmoCpSCN0aw91NXZQlP6GfjmJka9GXbEeBlVpZ2JJwmEx4NJZ7yXYJHnG_Hj6zIQhdiPkQB_KZ9pzQnZqOseFcNQ4ggc-5JN_fHlkCSirhcQvSf_f0s3youq_Zlw/s654/membuat+aplikasi+gui+dengan+BAIK-Lang+02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Aplikasi GUI Berat Badan Ideal Menggunakan BAIK-Lang" border="0" data-original-height="461" data-original-width="654" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZJfnqQZ5HQiblSXsSmoCpSCN0aw91NXZQlP6GfjmJka9GXbEeBlVpZ2JJwmEx4NJZ7yXYJHnG_Hj6zIQhdiPkQB_KZ9pzQnZqOseFcNQ4ggc-5JN_fHlkCSirhcQvSf_f0s3youq_Zlw/w640-h452/membuat+aplikasi+gui+dengan+BAIK-Lang+02.png" title="Membuat Aplikasi GUI Berat Badan Ideal Menggunakan BAIK-Lang" width="640" /></a></div><br /> <p></p><p><a href="http://baik-lang.id/" rel="nofollow" target="_blank">Bahasa Pemrograman BAIK</a> juga bisa digunakan dalam pembuatan aplikasi GUI. Untuk itu dalam kesempatan kali ini <a href="http://beriteknol.blogspot.com" rel="" target="_blank"><b>Beriteknol</b></a> akan membahasnya. Dalam bahasan kali ini Beriteknol akan membuat sebuah aplikasi penghitung berat badan ideal (BMI) menggunakan Bahasa BAIK-Lang GUI.</p><h3 style="text-align: left;">1. Membuat Window Frame</h3><p>Pertama kali dalam pembuatan aplikasi GUI kita harus terlebih dahulu membuat <i>Window Frame</i> yang merupakan dasaran dari berbagai <i>object</i> yang kita gunakan.</p><p>Tuliskan baris berikut untuk membuat Window Frame di BAIK-Lang</p><p><span id="2970539935877411425" itemprop="articleBody"></span></p><pre style="background: rgb(248, 248, 248) none repeat scroll 0% 0%; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px inset; box-sizing: border-box; line-height: 16px; overflow-wrap: break-word; padding: 12px 16px; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-wrap: break-word;"><span style="color: #111111; font-family: "consolas" , "liberation mono" , "courier" , monospace;"><span style="font-size: 14px; white-space: pre-wrap;"># Aplikasi Berat Ideal GUI<br />pakai_layar<br /><br /><br />lyr1 = layar<br />titel_layar lyr1, "Aplikasi Penghitung BMI"<br />luas_layar lyr1, 319, 288<br /><br /><br />aksi_tutup_program lyr1<br /><br />tampil_layar lyr1<br />kibar_layar<br /><br />tamat</span></span></pre><p></p><p><br /></p><p>Simpan file tersebut dengan nama "<b>gui_baik.ina</b>". Apabila kita jalankan maka tampilan akan seperti berikut:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8_qzu2S_LFdcAeQn6x5HkPj423PMjTpxVSQbEFmoE4aJ3NQBhUuPErkX1xcnJ85Qb4YQWx7BuA7aupjJJoKDYUNlAf9FcNIYs2DLRzjPdn8sqvkOxmeloHq2uPIpxU01rD7R56oXXW-U/s654/membuat+aplikasi+gui+dengan+BAIK-Lang.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Aplikasi GUI Berat Badan Ideal Menggunakan BAIK-Lang" border="0" data-original-height="461" data-original-width="654" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8_qzu2S_LFdcAeQn6x5HkPj423PMjTpxVSQbEFmoE4aJ3NQBhUuPErkX1xcnJ85Qb4YQWx7BuA7aupjJJoKDYUNlAf9FcNIYs2DLRzjPdn8sqvkOxmeloHq2uPIpxU01rD7R56oXXW-U/w640-h452/membuat+aplikasi+gui+dengan+BAIK-Lang.png" title="Membuat Aplikasi GUI Berat Badan Ideal Menggunakan BAIK-Lang" width="640" /></a></div><br /><p><br /></p><p><span style="font-family: courier;">pakai_layar</span> merupakan kode dari BAIK-Lang yang digunakan untuk mengambil modul GUI yang mana menggunakan modul GTK Window.</p><p><span style="font-family: courier;">lyr1 = layar</span> merupakan kode untuk membuat objek layar yang mana nantinya lyr1 ini akan digunakan sebagai dasaran dari objek-objek yang lain.</p><p><span style="font-family: courier;">titel_layar lyr1</span> merupakan kode untuk membuat judul pada <i>window frame</i>.</p><p><span style="font-family: courier;">luas_layar lyr1</span> merupakan kode untuk menyesuaikan ukuran dari <i>window frame</i>.</p><p><span style="font-family: courier;">aksi_tutup_program lyr1</span> merupakan kode yang berfungsi melakukan penutupan aplikasi. Fungsi ini akan berjalan ketika kita melakukan klik pada tombol <i>close</i> pada <i>window</i>.</p><p><span style="font-family: courier;">tampil_layar lyr1</span> merupakan kode untuk menampilkan layar atau dasaran yang kita buat.</p><p><span style="font-family: courier;">kibar_layar</span> merupakan kode untuk menampilkan window frame.</p><p><br /></p><h3 style="text-align: left;">2. Membuat Object Pada Window Frame</h3><p>Langkah selanjutnya adalah kita membuat objek-objek yang yang akan kita pasang pada layar. Ketikkan kode berikut di bawah kode <span style="font-family: courier;">luas_layar lyr1, 319, 288</span> :</p><p><span id="2970539935877411425" itemprop="articleBody"></span></p><pre style="background: rgb(248, 248, 248) none repeat scroll 0% 0%; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px inset; box-sizing: border-box; line-height: 16px; overflow-wrap: break-word; padding: 12px 16px; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-wrap: break-word;"><span style="color: #111111; font-family: "consolas" , "liberation mono" , "courier" , monospace;"><span style="font-size: 14px; white-space: pre-wrap;">alas1 = alas_tegak<br />hias_layar lyr1, alas1<br /><br />papan1 = papan_status<br />susun_papan_status alas1, papan1<br /><br />set_status papan1, "HASIL BMI = "<br /><br />lyr2 = layar_gulung<br />isi_alas_tegak alas1, lyr2<br /><br /><br />alas2 = alas_tetap<br />hias_layar lyr2, alas2<br /><br />lblNama = label "Nama"<br />hias_alas alas2, lblNama, 20, 20, 58, 18<br /><br />tNama = masukan<br />set_warnadasar tNama, "kuning"<br />hias_alas alas2, tNama, 80, 20, 211, 32<br /><br />lblAlamat = label "Alamat"<br />hias_alas alas2, lblAlamat, 20, 80, 58, 18<br /><br />tAlamat = masukan<br />set_warnadasar tAlamat, "kuning"<br />hias_alas alas2, tAlamat, 80, 70, 211, 32<br /><br />lblTinggiBadan = label "Tinggi Badan"<br />hias_alas alas2, lblTinggiBadan, 20, 120, 91, 18<br /><br />tTinggiBadan = masukan<br />set_warnadasar tTinggiBadan, "kuning"<br />hias_alas alas2, tTinggiBadan, 20, 140, 91, 32<br /><br />lblBeratBadan = label "Berat Badan"<br />hias_alas alas2, lblBeratBadan, 20, 180, 91, 18<br /><br />tBeratBadan = masukan<br />set_warnadasar tBeratBadan, "kuning"<br />hias_alas alas2, tBeratBadan, 20, 200, 91, 32<br /><br />btnHitung = tombol "HITUNG"<br />set_tips btnHitung,"Hitung Berat Ideal"<br />hias_alas alas2, btnHitung, 200, 200, 88, 34<br /><br /></span></span></pre> <br /><p></p>Keterangan dari kode di atas adalah sebagai berikut :<p><span style="font-family: courier;">alas1 = alas_tegak</span> merupakan kode untuk membuat alas.</p><p><span style="font-family: courier;">papan1 = papan_status</span> merupakan kode yang digunakan untuk membuat papan status yang berada di bawah.</p><p>Simpan kode di atas. Apabila kita jalankan kode di atas makan aplikasi akan berjalan seperti berikut:</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj941yPIC0iyN13e3eR1yfoiMIN1HBy9PXPmCWupwUwXJ7UMv96zUZVIFZA4HM-XIVvoTExnbVRbccQwylfr6cy_QJrljZdbrPhqm5SnYxRYZqHiXesGcckq9cVRnDAO0Ff9FAl8NR-5UI/s652/membuat+aplikasi+gui+dengan+BAIK-Lang+01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Aplikasi GUI Berat Badan Ideal Menggunakan BAIK-Lang" border="0" data-original-height="463" data-original-width="652" height="454" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj941yPIC0iyN13e3eR1yfoiMIN1HBy9PXPmCWupwUwXJ7UMv96zUZVIFZA4HM-XIVvoTExnbVRbccQwylfr6cy_QJrljZdbrPhqm5SnYxRYZqHiXesGcckq9cVRnDAO0Ff9FAl8NR-5UI/w640-h454/membuat+aplikasi+gui+dengan+BAIK-Lang+01.png" title="Membuat Aplikasi GUI Berat Badan Ideal Menggunakan BAIK-Lang" width="640" /></a></div><p><br /></p><h3 style="text-align: left;">3. Membuat Fungsi Hitung BMI<br /></h3><p>Langkah selanjutnya adalah kita membuat fungsi untuk menghitung BMI. Kode fungsi untuk menghitung BMI adalah seperti berikut:</p><p><span id="2970539935877411425" itemprop="articleBody"></span></p><pre style="background: rgb(248, 248, 248) none repeat scroll 0% 0%; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px inset; box-sizing: border-box; line-height: 16px; overflow-wrap: break-word; padding: 12px 16px; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-wrap: break-word;"><span style="color: #111111; font-family: "consolas" , "liberation mono" , "courier" , monospace;"><span style="font-size: 14px; white-space: pre-wrap;">Fungsi hitungBMI(tinggiBadan, beratBadan, pitaStatus) {<br /> tinggi = teks_masukan tinggiBadan<br /> berat = teks_masukan beratBadan<br /> <br /><br /> tinggi = ke_angka tinggi<br /> berat = ke_angka berat<br /> all = (tinggi/100) * (tinggi/100)<br /> bmi = berat/all<br /><br /><br /> kata_status = ""<br /><br /> jika bmi<18.0 maka<br /> kata_status = gabung "HASIL BMI = ", bmi, " (kekurusan)"<br /> lainjika bmi>25.0 maka<br /> kata_status = gabung "HASIL BMI = ", bmi, " (kegemukan)"<br /> lainnya<br /> kata_status = gabung "HASIL BMI = ", bmi, " (ideal)"<br /> akhirjika<br /><br /><br /> set_status pitaStatus, kata_status<br />}</span></span></pre><p></p><p></p><p><br /></p><p>Kita taruh rumus fungsi hitung BMI di atas di bawah kode <span style="font-family: courier;">tamat</span>. Kemudian kita tambahkan kode di atas kode <span style="font-family: courier;">aksi_tutup_program</span> dengan kode berikut:</p><p><span id="2970539935877411425" itemprop="articleBody"></span></p><pre style="background: rgb(248, 248, 248) none repeat scroll 0% 0%; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px inset; box-sizing: border-box; line-height: 16px; overflow-wrap: break-word; padding: 12px 16px; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-wrap: break-word;"><span style="color: #111111; font-family: "consolas" , "liberation mono" , "courier" , monospace;"><span style="font-size: 14px; white-space: pre-wrap;">aksi_fungsi btnHitung, &hitungBMI(tTinggiBadan, tBeratBadan, papan1)</span></span></pre> <br /><p></p><p></p><p>Simpan kode di atas, maka aplikasi penghitung berat badan ideal atau BMI kita telah selesai. Apabila kita menekan tombol hitung setelah selesai menuliskan <b>tinggi badan</b> dan <b>berat badan</b> maka hasil dari perhitungan akan ditampilkan pada papan status yang berada di bawah.</p><p>Hitungan BMI adalah apabila kurang dari 18 maka dinyatakan kurus dan apabila nilai dari BMI lebih dari 25 maka dinyatakan gemuk sedangkan apabila diantara nilai tersebut maka dinyatakan ideal.</p><p>Untuk mempermudah berikut ini kode lengkap dari aplikasi penghitung berat badan ideal (BMI) di atas.</p><pre style="background: rgb(248, 248, 248) none repeat scroll 0% 0%; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px inset; box-sizing: border-box; line-height: 16px; overflow-wrap: break-word; padding: 12px 16px; text-shadow: rgb(255, 255, 255) 0px 1px 0px; word-wrap: break-word;"><span style="color: #111111; font-family: "consolas" , "liberation mono" , "courier" , monospace;"><span style="font-size: 14px; white-space: pre-wrap;"># Aplikasi Berat Ideal GUI<br />pakai_layar<br />lyr1 = layar<br />titel_layar lyr1, "Aplikasi Penghitung BMI"<br />luas_layar lyr1, 319, 288<br /><br />alas1 = alas_tegak<br />hias_layar lyr1, alas1<br /><br />#papan status<br />papan1 = papan_status<br />susun_papan_status alas1, papan1<br /><br />set_status papan1, "HASIL BMI = "<br /><br />lyr2 = layar_gulung<br />isi_alas_tegak alas1, lyr2<br /><br /><br />alas2 = alas_tetap<br />hias_layar lyr2, alas2<br /><br />lblNama = label "Nama"<br />hias_alas alas2, lblNama, 20, 20, 58, 18<br /><br />tNama = masukan<br />set_warnadasar tNama, "kuning"<br />hias_alas alas2, tNama, 80, 20, 211, 32<br /><br />lblAlamat = label "Alamat"<br />hias_alas alas2, lblAlamat, 20, 80, 58, 18<br /><br />tAlamat = masukan<br />set_warnadasar tAlamat, "kuning"<br />hias_alas alas2, tAlamat, 80, 70, 211, 32<br /><br />lblTinggiBadan = label "Tinggi Badan"<br />hias_alas alas2, lblTinggiBadan, 20, 120, 91, 18<br /><br />tTinggiBadan = masukan<br />set_warnadasar tTinggiBadan, "kuning"<br />hias_alas alas2, tTinggiBadan, 20, 140, 91, 32<br /><br />lblBeratBadan = label "Berat Badan"<br />hias_alas alas2, lblBeratBadan, 20, 180, 91, 18<br /><br />tBeratBadan = masukan<br />set_warnadasar tBeratBadan, "kuning"<br />hias_alas alas2, tBeratBadan, 20, 200, 91, 32<br /><br />btnHitung = tombol "HITUNG"<br />set_tips btnHitung,"Hitung Berat Ideal"<br />hias_alas alas2, btnHitung, 200, 200, 88, 34<br /><br />aksi_fungsi btnHitung, &hitungBMI(tTinggiBadan, tBeratBadan, papan1)<br />aksi_tutup_program lyr1<br /><br />tampil_layar lyr1<br />kibar_layar<br /><br />tamat<br /><br />Fungsi hitungBMI(tinggiBadan, beratBadan, pitaStatus) {<br /> tinggi = teks_masukan tinggiBadan<br /> berat = teks_masukan beratBadan<br /> <br /> tinggi = ke_angka tinggi<br /> berat = ke_angka berat<br /> all = (tinggi/100) * (tinggi/100)<br /> bmi = berat/all<br /><br /> kata_status = ""<br /><br /> jika bmi<18.0 maka<br /> kata_status = gabung "HASIL BMI = ", bmi, " (kekurusan)"<br /> lainjika bmi>25.0 maka<br /> kata_status = gabung "HASIL BMI = ", bmi, " (kegemukan)"<br /> lainnya<br /> kata_status = gabung "HASIL BMI = ", bmi, " (ideal)" <br /> akhirjika<br /><br /><br /> set_status pitaStatus, kata_status<br />}<br /></span></span></pre><p>Demikian artikel kali ini tentang <b>Membuat Aplikasi GUI Menggunakan BAIK-Lang</b>. Semoga artikel ini dapat memberikan manfaat dan terimakasih.</p><p><b>Baca juga :</b></p><p><a href="http://beriteknol.blogspot.com/2021/01/cara-install-baik-scripting-language.html" target="_blank">Cara Install BAIK Scripting Language 9.5.2</a></p><p><a href="http://beriteknol.blogspot.com/2019/08/tutorial-baik-scripting-language-logika.html" target="_blank">Tutorial BAIK Scripting Language Logika If Else</a></p><p><a href="http://beriteknol.blogspot.com/2019/10/tutorial-baik-scripting-language.html">Tutorial BAIK Scripting Language: Looping atau Perulangan di BAIK-Lang</a></p><p><a href="https://beriteknol.blogspot.com/2019/09/tutorial-baik-scripting-language.html" target="_blank">Tutorial BAIK Scripting Language: Mengenal Switch Case di BAIK-Lang </a><br /></p>

Membuat Aplikasi GUI Berat Badan Ideal Menggunakan BAIK-Lang

Membuat Aplikasi GUI Menggunakan BAIK-Lang - Salah satu hal yang menyenangkan saat membuat aplikasi adalah ketika aplikasi yang kita buat mempunya sebuah desain visual. Desain visual dari sebuah aplikasi disebut juga Graphical User Interface atau yang biasa disebut GUI. Namun istilah GUI biasanya cu…

Baca selengkapnya »