How to make Steem Calculator Aplication (STEEM-IDR) using PHP and Javascript

sogata (64)in #utopian-io • 8 years ago (edited)

Dear Friend : . . .

Yesterday, I Have shared a tutorial how to display live steem price according bittrex.com in our web page. You can see my contribution here. In this occasion, i wanna share how to make a calculator aplication to calculate steem price to IDR ( Indonesian Rupiah).

Introduction

To make this calculator we use the API from bittrex.com to convert steem to bitcoin and we also use vip.bitcoin api to convert bitcoin to IDR. To get data from the API we use PHP file_get_contents function. And the calcolator function we will use javacript langguage.

Requirement

webserver
browser
Editor

In this tutorial I use visual studio code for editor, XAMPP for server and Google Crome for Browser

The Steeps

Reactive Your Webserver, And Create a Folder in xampp/htdocs/ and rename it calculator, then create index.php. While you use Apache server use directory var/www
We make calculator form using html bootatrap3. Copy and paste this code to file index.php . Then try to run.

<<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CALCULATOR STEEM - IDR</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    (html comment removed: bootstrap mcdn)
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
    <h3 class="text-center">STEEM - IDR CALCULATOR by @SOGATA</h3>
        <div class="row">
            <div class="col-sm-5">
                <div class="input-group ">
                <input type="text" class="form-control input-lg " placeholder="steem-amount" id="steem">
                <span class="input-group-addon">STEEM</span>
                </div>
            </div>
            <div class="col-sm-2"><center><span style="font-size: 40px;" class="glyphicon glyphicon-transfer"></span></center></div>
            <div class="col-sm-5">
                <div class="input-group ">
                <input type="text" class="form-control input-lg " placeholder="IDR-amount" id="idr">
                <span class="input-group-addon">RUPIAH</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Now, we need data of STEEM price and BITCOIN price, here we will use PHP file_get_content fucntion to grab from bittrex API and bitcoin.co.id API. Add this code before HTML code above, Then Save.

<?php
$urlbtc = file_get_contents("https://vip.bitcoin.co.id/api/btc_idr/ticker");
$databtc1 = json_decode($urlbtc, true);
$databtc2=$databtc1['ticker'];
$lastbtc=$databtc2['buy'];
$urlsteem = file_get_contents("https://bittrex.com/api/v1.1/public/getmarketsummary?market=btc-steem");
$datasteem1 = json_decode($urlsteem, true);
$datasteem2= $datasteem1['result'];
$datasteem3= $datasteem2[0];
$laststeem=$datasteem3['Last'];
?>

note : The Complete tutorial to grab data from other website API you can see on my previous contributions. here the link

To make calcultor function we need add the jQuery function, Here the code. Add the code bellow under </body> . Then Save and run.

<script>
        $(document).ready(function() {
            $("#steem").on("input",function() {
                var btcsteem=<?php echo $laststeem?>;
                var rpbtc=<?php echo $lastbtc?>;
                var amount_steem = Number($(this).val());
                var amount_idr = amount_steem * btcsteem * rpbtc;
                var display=amount_idr.toFixed(0);
                $("#idr").val(display);
            });
        });
</script>

Finally, now we have a calculator to check the STEEM price to IDR ( indonesian local currency). here the full code:

<?php
$urlbtc = file_get_contents("https://vip.bitcoin.co.id/api/btc_idr/ticker");
$databtc1 = json_decode($urlbtc, true);
$databtc2=$databtc1['ticker'];
$lastbtc=$databtc2['buy'];
$urlsteem = file_get_contents("https://bittrex.com/api/v1.1/public/getmarketsummary?market=btc-steem");
$datasteem1 = json_decode($urlsteem, true);
$datasteem2= $datasteem1['result'];
$datasteem3= $datasteem2[0];
$laststeem=$datasteem3['Last'];
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CALCULATOR STEEM - IDR</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    (html comment removed: bootstrap mcdn)
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head>
<body>
    <div class="container">
    <h3 class="text-center">STEEM - IDR CALCULATOR by @SOGATA</h3>
        <div class="row">
            <div class="col-sm-5">
                <div class="input-group ">
                <input  type="text" class="form-control input-lg " placeholder="steem-amount" id="steem">
                <span class="input-group-addon">STEEM</span>
                </div>
            </div>
            <div class="col-sm-2"><center><span style="font-size: 40px;" class="glyphicon glyphicon-transfer"></span></center></div>
            <div class="col-sm-5">
                <div class="input-group ">
                <input  type="text" class="form-control input-lg " placeholder="IDR-amount" id="idr">
                <span class="input-group-addon">RUPIAH</span>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
        $(document).ready(function() {
            $("#steem").on("input",function() {
                var btcsteem=<?php echo $laststeem?>;
                var rpbtc=<?php echo $lastbtc?>;
                var amount_steem = Number($(this).val());
                var amount_idr = amount_steem * btcsteem * rpbtc;
                var display=amount_idr.toFixed(0);
                $("#idr").val(display);
            });
        });
</script>
</html>

You also can Download Here

Conclusion

This calculator use Live Price according bittrex.com and bitcoin.co.id. Just this from me in this occassion, For more information about this tutorial you can contact me on disqord with the same name. Thank you.

Posted on Utopian.io - Rewarding Open Source Contributors

#tutorials #opensource #php #indonesia

8 years ago in #utopian-io by sogata (64)

Sort:

utopian-io (71) 8 years ago

Hey @sogata I am @utopian-io. I have just upvoted you!

Achievements

This is your first accepted contribution here in Utopian. Welcome!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

$0.11

1 vote

[-]

shreyasgune (58) 8 years ago

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

$0.00

STEEM 0.04

TRX 0.31

JST 0.076

BTC 63575.31

ETH 1665.10

USDT 1.00

SBD 0.42