Sabtu, 29 April 2017

Membuat Progress bar dengan Excel

April 29, 2017 Leave a Reply

Membuat Progress Bar Pada Excel

Progress bar adalah suatu proses yang dilakukan pada saat sebuah proses sedang berjalan sampai proses itu selesai. Progress bar bisa membantu kita mengetehui bahwa proses yang kita perintahkan apakah berjalan atau tidak atau sejauh mana proses itu berjalan. Inilah gambaran dari proses progress bar.
progress bar

Animasi di atas merupakan animasi progress bar pada file excel. Mungkin akan timbul pertanyaan bagaimana cara membuat progress bar pada excel?

Maka pada postingan kali ini saya akan mencoba membahas cara Membuat Progress Bar dengan Excel.

Inilah langkah-langkah untuk Membuat Progress Bar pada Excel.
  1.  Bukalah File Microsoft excel, dengan cara menekan tombol start kemudian all program , microsoft office dan carilah microsoft excel.
  2. Kemudian cari menu tab developer kemudian pilih visual basic atau bila tidak ada cukup dengan menekan alt dan f11, sehingga tampil jendela visual basic seperti gambar di bawah ini.

    3. Visual Basic
  3. Setelah tampil Jendela Visual basic seperti di atas maka langkah selanjutnya kita membuat sebuah userform dengan memilih menu insert pada jendela visual basic itu kemudian userform.
  4. Setelah terbentuk jendela userform maka langkah selanjutnya membuat object progress bar dengan cara mengaktifkan userform kemudian Aktifkan jendela tool bar klik kanan pada jendela toolbar itu klik additional control sehingga tampil kotak dialog seperti ini

    5. additional controls
  5. ceklis microsoft ProgressBar control kemudian klik ok. kemudian pada jendela toolbar gambarkan objek progress bar itu sepanjang mana kita akan membuatnya sesuaikan dengan ukuran userform agar tampilan progress bar itu menarik.
  6. Langkah selanjutnya double klik progressbar itu kemudian masukan kode script berikut

    7. Private Sub UserForm_Activate()
     Set Ipa_Sheet = Sheets("Sheet1")
        Set Ipa_Sheet = Range("a1:a1000")
        i = 0
            With userform1
                .ProgressBar1.Min = 0
                .ProgressBar1.Max = Ipa_Sheet.Cells.Count
            End With
            For Each rng In Ipa_Sheet.Cells
                rng.Value = Application.WorksheetFunction.Clean(Application.WorksheetFunction.Trim(rng.Value))
                i = i + 1
                userform1.ProgressBar1.Value = i
                userform1.Caption = VBA.Format(i / userform1.ProgressBar1.Max, "0%") & "  Complete"
                DoEvents
            Next
            Unload Me
            MsgBox "membuat Progress Bar Berhasil"
    End Sub
  7. Lalu klik run, maka selesailah Pembuatan Progress bar pada excel.
Demikianlah cara membuat progress bar pada excel selamat mencoba!
Categories:

Jumat, 28 April 2017

Membuat animasi Shiva dengan html

April 28, 2017 Leave a Reply

Animasi Shiva

Film shiva merupakan salah satu film yang disukai oleh anak saya, film shiva tayang setiap hari di antv. pada saat film ini tidak tayang anak saya sering meminta untuk menontonnya lewat internet, namun saya berpikir bagaimana membuat animasi shiva yang bisa ditonton secara offline agar tidak memakan quota. 

Saya punya ide untuk membuat animasi shiva, mungkin ide ini sederhana, namun untuk mengembangankan kreatifitasnya bisa dibuat dengan gambar-gambar yang lebih menarik.Ada beberapa persiapan yang harus dibuat untuk membuat animasi html shiva, yang utama adalah gambar shiva,gambar shivanya seperti di bawah ini untuk memperhalus gerakannnya bisa diubah sendiri.

shiva
Kumpulan gambar shiva di atas harus mempuanyai bentuk yang berbeda agar gambarnya kelihatan bergerak. Setelah membuat gambar seperti di atas selanjutnya kita membuat script html.berikut :

<html>
    <head>
        <title>Shiva Animation Demo</title>
    </head>
    <body>
        <canvas id="ShivaAnimation"></canvas>
        <script src="shiva.js"></script>
    </body>
</html>
Simpan script di atas dengan nama Shiva.html. untuk langkah selanjutnya kita membuat file javascriptnya copykan saja script berikut :

(function() {
  
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

(function () {
          
    var shiva,
        shivaImage,
        canvas;                  

    function gameLoop () {
  
      window.requestAnimationFrame(gameLoop);

      shiva.update();
      shiva.render();
    }
  
    function sprite (options) {
  
        var that = {},
            frameIndex = 0,
            tickCount = 0,
            ticksPerFrame = options.ticksPerFrame || 0,
            numberOfFrames = options.numberOfFrames || 1;
      
        that.context = options.context;
        that.width = options.width;
        that.height = options.height;
        that.image = options.image;
      
        that.update = function () {

            tickCount += 1;

            if (tickCount > ticksPerFrame) {

                tickCount = 0;
              
                // If the current frame index is in range
                if (frameIndex < numberOfFrames - 1) {  
                    // Go to the next frame
                    frameIndex += 1;
                } else {
                    frameIndex = 0;
                }
            }
        };
      
        that.render = function () {
      
          // Clear the canvas
          that.context.clearRect(0, 0, that.width, that.height);
        
          // Draw the animation
          that.context.drawImage(
            that.image,
            frameIndex * that.width / numberOfFrames,
            0,
            that.width / numberOfFrames,
            that.height,
            0,
            0,
            that.width / numberOfFrames,
            that.height);
        };
      
        return that;
    }
  
    // Get canvas
    canvas = document.getElementById("ShivaAnimation");
    canvas.width = 100;
    canvas.height = 100;
  
    // Create sprite sheet
    shivaImage = new Image();  
  
    // Create sprite
    shiva = sprite({
        context: canvas.getContext("2d"),
        width: 1000,
        height: 100,
        image: shivaImage,
        numberOfFrames: 10,
        ticksPerFrame: 4
    });
  
    // Load sprite sheet
    shivaImage.addEventListener("load", gameLoop);
    shivaImage.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqFXJRlcf4Uk_Ljuw7pQpDgUCm91cXid8QqRn1em1zt-ds6lBg4O0ayVOtFG1tP7bV-yNcfUMHVniSEYcgsAxG1ulNzpOy9h3Mo8Cj6pdJ5MjtbbON0u_19gtRRz6bqgXRZK5kL4NqLTMB/h36/shiva.png";

} ());
Nah itulah kode html untuk membuat animasi shiva untuk melihat hasil dari script di atas adalah seperti demo di bawah ini

Membuat Jam Dinding dengan Html

April 28, 2017 Leave a Reply
Hampir setiap hari bahkan setiap waktu kita melihat jam apalagi pada waktu yang ditunggu-tunggu, hampir di setiap rumah ada jam dinding, walaupun sebenarnya informasi akan waktu itu banyak tapi keberadaan jam dinding seolah-olah tidak bisa dihindari.

jam

Sebagai pecinta html terbersit di benak saya bagaimana cara membuat jam dinding tersebut, setelah mengumpulkan dari beberapa sumber akhirnya saya menemukan cara membuat jam dinding dengan html. seperti yang kita ketahui tentunya jam dinding tersebut biasanya terdiri dari 3 jarum jam yaitu jarum yang panjang, untuk detik dan menit serta jarum pendek untuk menunjukan jam. 

Apabila kita ingin membuat jam dinding itu berbentuk lingkaran, maka kita juga harus tahu bagaimana cara membuat lingkaran dengan html.berikut adalah script html untuk membuat jam dinding:


<!DOCTYPE html>
<html>
<body>

<canvas id="mycanvas" width="400" height="400"
style="background-color:#0fff">
</canvas>
<script>
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(gambarjam, 1000);
function gambarjam() {
  drawFace(ctx, radius);
  angkajam(ctx, radius);
  drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#00ff');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#00ff');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#00ff';
  ctx.fill();
}
function angkajam(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}
function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    jarumjam(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    jarumjam(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    jarumjam(ctx, second, radius*0.9, radius*0.02);
}
function jarumjam(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}
</script>

</body>
</html>

Dari kode di atas kita bisa tahu kode mana untuk membuat jarum jam, dan mana kode untuk membuat lingkaran, jangan lupa simpan kode di atas dengan ekstensi html.kemudian jalankanlah kode html itu maka tampilan jam di dengan kode di atas akan seperti ini :

Categories:

Cara Membuat game dengan HTML

April 28, 2017 Leave a Reply

game ular
Pada postingan kali ini saya ingin berbagi tips, bagaimana cara membuat game dengan html, pada postingan sebelumnya saya juga pernah memberikan tips tentanga bagaimana cara membuat game dengan html,kala itu tutorialnya game html seperti game loncat-loncat dengan menggunakan mouse untuk menggerakan pemainnya. namun kali ini saya mencoba berbagi tips untuk membuat game html dengan menggunakan tanda panah pada keyboard.

game html kali ini dinamakan game ular, hampir sama dengan game-game yang kita lihat di hp jadul. memang game ini cukup sederhana, namun kalau dulu asyik menggunakan game ular tersebut namun kali ini timbul pertanyaan bagaimana cara membuat game ular tersebut.

Seperti biasa untuk membuat file html kita harus membuatnya di notepad. Pada notepad itu kita harus menyiapkan area untuk game snake itu area game ini biasanya ada pada html5 yang disebut dengan istilah canvas maka contoh penulisannya seperti ini:

<!DOCTYPE html>
<html></head>
    <body>
        <!-- HTML5 canvas untuk lokasi game -->
      <center>
<canvas background=”000000” id="canvas" width="300" height="250"></canvas>
      </center>    
    </body>
</html>

Untuk mengatur lebar dan tingginya bisa disesuaikan dengan kebutuhan sebesar mana area game itu akan dibuat namun jangan melebihi pandangan kita di komputer. selain dengan kode html tersebut kode di atas harus dilengkapi dengan kode javascript, maka untuk lengkapnya copykan saja script html berikut, kode ini sudah digabung antara html dan javascript.

 <!DOCTYPE html>
<html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <!-- Jquery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript" >
            $(document).ready(function() {
                var canvas = $("#canvas")[0];
                var ctx = canvas.getContext("2d");
                var w = $("#canvas").width();
                var h = $("#canvas").height();

                var cw = 10;
                var d;
                var food;
                var score;

                var snake_array; //membuat cell aray untuk membuat ular

                function init()
                {
                    d = "right"; //default direction
                    create_snake();
                    create_food(); //membuat makanan untuk ular
                    //score game
                    score = 0;

                    if (typeof game_loop != "undefined")
                        clearInterval(game_loop);
                    game_loop = setInterval(paint, 60);
                }
                init();

                function create_snake()
                {
                    var length = 5; //panjang ular default
                    snake_array = [];
                    for (var i = length - 1; i >= 0; i--)
                    {
                        //membuat ular horizontal mulai dari arah kiri
                        snake_array.push({x: i, y: 0});
                    }
                }

                //membuat makanan
                function create_food()
                {
                    food = {
                        x: Math.round(Math.random() * (w - cw) / cw),
                        y: Math.round(Math.random() * (h - cw) / cw),
                    };
                }

                //Mewarnai tubuh ular
                function paint()
                {
                    ctx.fillStyle = "white";
                    ctx.fillRect(0, 0, w, h);
                    ctx.strokeStyle = "black";
                    ctx.strokeRect(0, 0, w, h);

                    //Membuat pergerakan untuk ular.
                    var nx = snake_array[0].x;
                    var ny = snake_array[0].y;
                    if (d == "right")
                        nx++;
                    else if (d == "left")
                        nx--;
                    else if (d == "up")
                        ny--;
                    else if (d == "down")
                        ny++;
                   
                    //Cek tabakan tembok
                    if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || check_collision(nx, ny, snake_array))
                    {
                        //restart game
                        init();
                        return;
                    }
                   
                    //Cek tabrakan dengan makanan
                    if (nx == food.x && ny == food.y)
                    {
                        var tail = {x: nx, y: ny};
                        score++;
                        //membuat makanan baru
                        create_food();
                    }
                    else
                    {
                        var tail = snake_array.pop();
                        tail.x = nx;
                        tail.y = ny;
                    }

                    snake_array.unshift(tail);

                    for (var i = 0; i < snake_array.length; i++)
                    {
                        var c = snake_array[i];
                        paint_cell(c.x, c.y);
                    }

                    //Mewarnai makanan
                    paint_cell(food.x, food.y);
                    //Mewarnai score game
                    var score_text = "Score: " + score;
                    ctx.fillText(score_text, 5, h - 5);
                }

                function paint_cell(x, y)
                {
                    ctx.fillStyle = "green";
                    ctx.fillRect(x * cw, y * cw, cw, cw);
                    ctx.strokeStyle = "black";
                    ctx.strokeRect(x * cw, y * cw, cw, cw);
                }

                function check_collision(x, y, array)
                {
                    for (var i = 0; i < array.length; i++)
                    {
                        if (array[i].x == x && array[i].y == y)
                            return true;
                    }
                    return false;
                }

                //Keyboard control ular
                $(document).keydown(function(e) {
                    var key = e.which;
                    if (key == "37" && d != "right")
                        d = "left";
                    else if (key == "38" && d != "down")
                        d = "up";
                    else if (key == "39" && d != "left")
                        d = "right";
                    else if (key == "40" && d != "up")
                        d = "down";
                })
            })

Jangan lupa simpan kode di atas dengan gameular.html, kemudian coba jalankan, untuk demo dari kode ular itu bisa dicoba dahulu disini !

Categories: