Promo Member Baru 40%! Program Full Stack Membership! Hanya 3 Hari! Klaim Promo
Lebih terarah belajar coding melalui Kelas Online dan Interactive Coding Lihat Materi Belajar

Membuat Aplikasi Tizen Konversi Suhu (Video Tutorial)

Ditulis oleh Irman Firmansyah, dipublikasi pada 25 Aug 2017 dalam kategori Tutorial
Membuat Aplikasi Tizen Konversi Suhu (Video Tutorial) - CodePolitan.com

Sebelum masuk ke tutorial, berikut ini merupakan beberapa pertanyaan yang mungkin ditanyakan terkait dengan tutorialnya:

FAQ

Q: Tools apa saja yang digunakan?
A: Tizen Studio

Q: Dimana saya bisa download icon (asset) nya?
A: Download disini https://drive.google.com/file/d/0B_efWKyfdfcSdnRJWjlIZWdZTUk/view?usp=sharing

Q: Kenapa pada saat membuat project tidak ada pilihan "TAU Single Page"?
A: Lakukan instalasi library TAU terlebih dahulu, lihat bagian "Instalasi TAU di IDE" pada link ini https://www.codepolitan.com/membuat-aplikasi-tizen-berbasis-html5

Q: Dimana saya bisa lihat script asli nya?
A: Lihat di bawah artikel ini

Q: Saya tidak bisa lihat videonya karena buram/resolusi kecil?
A: Lihat video nya secara fullscreen, atau lihat di YouTube dengan resolusi lebih tinggi (video ini support sampai 720p)

Q: Saya boleh download videonya?
A: Silahkan, asal jangan diperjualbelikan :)

Q: Bagaimana cara downloadnya?
A: Search di google dengan kata kunci "cara download video youtube", banyak tutorialnya

Q: Saya sudah siap mengikuti tutorialnya nih
A: Mantap, silahkan lanjutkan videonya ada dibawah

Tutorial

Script

Script file style.css

.ui-header > .ui-title-text-main {
    margin-top: 14px;
    margin-left: 15px;
    font-size: 22px;
}
.ui-mobile .ui-page {
    background-color: white;
    background-image: none;
}
h4 {
    margin: 10px;
}
.content {
    margin: 5px;
}
.button-padding {
    margin: 10px;
}
.btn-icon-info::after {
    -webkit-mask-image: url(images/info.png);
}
.btn-icon-back::after {
    -webkit-mask-image: url(images/back.png);
}
.content-detail {
    margin-left: 20px;
}

Script file index.html

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    <link rel="stylesheet"  href="./lib/tau/mobile/theme/default/tau.css">
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
</head>

<body>
    <div class="ui-page" id="main">
        <div class="ui-header">
            <div class="ui-title-text-main">Konversi Suhu</div>
            <a id="btnAbout" class="ui-header-btn ui-header-btn-right ui-header-btn-icon btn-icon-info"></a>
        </div><!-- /header -->

        <div class="ui-content">
            <div class="content">
                <h4>Celsius</h4>
                <input onkeyup="suhu('C')" id="c" type="number" placeholder="Input celsius">
                <h4>Fahrenheit</h4>
                <input onkeyup="suhu('F')" id="f" type="number" placeholder="Input fahrenheit">
                <h4>Kelvin</h4>
                <input onkeyup="suhu('K')" id="k" type="number" placeholder="Input kelvin">
                <div id="btnReset" class="ui-btn button-padding">Reset</div>
            </div>
        </div><!-- /content -->
    </div><!-- /page -->

    <div class="ui-page" id="about">
        <div class="ui-header">
            <h1>Tentang</h1>
            <a id="btnBack" class="ui-header-btn ui-header-btn-left ui-header-btn-icon btn-icon-back"></a>
        </div><!-- /header -->

        <div class="ui-content">
            <div class="content">
                <h4>Konversi Suhu</h4>
                <div class="content-detail">Versi 1.0.0</div>
                <h4>Dibuat Oleh</h4>
                <div class="content-detail">Irman Firmansyah</div>
            </div>
        </div><!-- /content -->
    </div><!-- /page -->

    <script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
    <script src="./js/main.js"></script>
</body>
</html>

Script file main.js

( function () {
    window.addEventListener( 'tizenhwkey', function( ev ) {
        if( ev.keyName === "back" ) {
            var activePopup = document.querySelector( '.ui-popup-active' ),
                page = document.getElementsByClassName( 'ui-page-active' )[0],
                pageid = page ? page.id : "";

            if( pageid === "main" && !activePopup ) {
                try {
                    tizen.application.getCurrentApplication().exit();
                } catch (ignore) {
                }
            } else {
                window.history.back();
            }
        }
    } );
} () );

var c = document.getElementById("c");
var f = document.getElementById("f");
var k = document.getElementById("k");
var btnReset = document.getElementById("btnReset");
var btnAbout = document.getElementById("btnAbout");
var btnBack = document.getElementById("btnBack");

btnReset.addEventListener("click", function() {
    clear();
});

btnAbout.addEventListener("click", function() {
    tau.changePage('about');
});

btnBack.addEventListener("click", function() {
    window.history.back();
});

function suhu(degree) {
    var x;
    var y;
    if (degree == "C") {
        if (c.value !== "") {
            x = c.value * 9 / 5 + 32; //rumus celsius ke fahrenheit
            f.value = x.toFixed(1); //hasil konversi tampilkan ke input fahrenheit dan bulatkan satu angka di belakang koma
            y = (c.value * 1) + 273.15; //rumus C ke K
            k.value = y.toFixed(1);
        }else{
            clear();
        }
    } else if (degree == "F") {
        if (f.value !== "") {
            x = (f.value - 32) * 5 / 9; // rumus F ke C
            c.value = x.toFixed(1);
            y = (f.value * 1 + 459.67) * (5 / 9); //rumus F ke K
            k.value = y.toFixed(1);
        }else{
            clear();
        }
    } else {
        if (k.value !== "") {
            x = (k.value * 1) - 273.15; //rumus K ke C
            c.value = x.toFixed(1);
            y = k.value * (9 / 5) - 459.67; //rumus K ke F
            f.value = y.toFixed(1);
        }else{
            clear();
        }
    }
}

function clear() {
    c.value = "";
    f.value = "";
    k.value = "";
}

background

Gabung CodePolitan Membership

Ingin belajar coding secara online dengan lebih terarah? Gabung sekarang dalam program Premium Membership di CodePolitan. Dapatkan ratusan modul belajar pemrograman premium dalam beragam format dengan materi silabus lengkap dan tersusun rapi dari awal hingga mahir.

LIHAT MATERI BELAJAR GABUNG MEMBERSHIP