Archive for April 2017

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:

Senin, 24 April 2017

Membuat Menu pada userform Excel

April 24, 2017 2 Comments
Setelah melihat beberapa tampilan di program lain tentang menu horizontal, dropdown menu dan menu- menu lain yang ada pada beberapa aplikasi maka timbul pertanyaan bisa gak membuat menu pada userform excel? Jawaban setelah beberapa kali mencari akhirnya saya menemukan bagaimana cara membuat menu pada userform excel.

Tentunya untuk membuat menu ini kita harus menggunakan vb excel, dan data excel harus tersimpan dalam format macro excel. Apa saja yang harus dipersiapkan untuk membuat menu excel pada userform? yang harus dipersiapkan untuk membuat menu pada userform excel adalah tentunya userform, module yang diisi dengan script-script atau kode-kode program untuk menampilkan menu itu dan file excel untuk menyusun menu yang akan ditampilkan.

Sekarang akan saya uraikan bagaimana cara membuat menu pada userform excel, berikut adalah langkah-langkah untuk membuat menu pada userform excel :

  1. Bukalah file excel
  2. Cari menu tab developer kemudian pilih visual basic atau dengan menekan tombol alt bersama-sama dengan f11 pada keyboard sehingga tampil jendel visual basic seperti di bawah ini
    3. vbexcel

  3. Setelah tampil jendela visual basic klik insert kemudian klik userfom atau ukuran userform sesuai kebutuhan.
  4. Langkah selanjutnya klik insert lagi sekarang klik module lalu ketikan kode berikut:

    5. Option Explicit
    Option Base 1
    ' membuat Windows Menu dengan menggunakan API
    '--------------------------------------------

    ' Membuat horizontal menu bar di bagian atas
    Public Declare Function CreateMenu Lib "user32" () As Long

    Public Declare Function CreatePopupMenu Lib "user32" () As Long

    Public Declare Function FindWindow Lib "user32" _
            Alias "FindWindowA" ( _
                ByVal lpClassName As String, _
                ByVal lpWindowName As String) As Long

    Public Declare Function GetMenu Lib "user32" (ByVal hwnd As Long) As Long

    Public Declare Function AppendMenu Lib "user32" _
            Alias "AppendMenuA" ( _
                ByVal hMenu As Long, _
                ByVal wFlags As Long, _
                ByVal wIDNewItem As Long, _
                ByVal lpNewItem As String) As Long

    Public Declare Function SetMenu Lib "user32" ( _
            ByVal hwnd As Long, _
            ByVal hMenu As Long) As Long

    Public Declare Function DestroyMenu Lib "user32" ( _
            ByVal hMenu As Long) As Long

    Public Declare Function SetWindowLong Lib "user32" _
            Alias "SetWindowLongA" ( _
                ByVal hwnd As Long, _
                ByVal nIndex As Long, _
                ByVal dwNewLong As Long) As Long

    Public Const MF_SEPARATOR As Long = &H800&
    Public Const MF_POPUP = &H10
    Public Const MF_STRING = &H0


    Public Const IDM_MU As Long = &H7D0 ' Menu Item ID
    '//
    Public g_hPopUpMenu() As Long       ' Popupmenu handles
    Public g_hMenu As Long              ' Userform menu handle
    Public g_hPopUpSubMenu() As Long    ' Submenu handles
    Public g_Rt() As Long               ' Values for testing debuging
    Public g_APIMacro() As String       ' Routine names associated with Menus
    Public g_hForm As Long              ' Userform handle
    Public g_MNUSheet As Worksheet      ' Menu Sheet

    Public Sub CreateAPIMenu()
    ' sub ini harusnya terekseusi jika terjadi init Userform
    Dim RowNum As Long, _
        SubMNU As Long, _
        TopMNUitems As Long, _
        SubMNUItem As Long, _
        TopMNU As Long, _
        Rt As Long, _
        MacroNum As Long

    ' Set menusheet
    Set g_MNUSheet = ThisWorkbook.Sheets("APIMNU")

    With g_MNUSheet
        ' Set-up now
        TopMNUitems = .Range("A1")
        SubMNU = .Range("B1")
      
        ReDim g_hPopUpMenu(TopMNUitems)
        ReDim g_Rt(TopMNUitems)
        ReDim g_hPopUpSubMenu(SubMNU)
        ReDim g_APIMacro(.Range("C1").Value)
      
        ' Main Menu Area at top
        g_hMenu = CreateMenu()
        Rt = SetMenu(g_hForm, g_hMenu)
      
        ' Initialize variables
        RowNum = 0
        MacroNum = 1
        SubMNUItem = LBound(g_hPopUpSubMenu)
      
        For TopMNU = 1 To TopMNUitems
            RowNum = RowNum + 1
            g_hPopUpMenu(TopMNU) = CreatePopupMenu()
            If TopMNU = 1 Then
                g_Rt(TopMNU) = AppendMenu(g_hMenu, MF_POPUP, g_hPopUpMenu(TopMNU), .Cells(2 + RowNum, 2))
            Else
                g_Rt(TopMNU) = AppendMenu(g_hMenu, MF_POPUP, g_hPopUpMenu(TopMNU), .Cells(1 + RowNum, 2))
            End If
            Do Until .Cells(2 + RowNum, 4).Text = "END"
                Select Case .Cells(2 + RowNum, 1).Value
                    Case 1
                    Case 0
                        If .Cells(1 + RowNum, 1) = 4 Then
                            g_Rt(TopMNU) = AppendMenu(g_hPopUpSubMenu(SubMNUItem - 1), _
                                MF_SEPARATOR, &O0, vbNullString)
                        Else
                            g_Rt(TopMNU) = AppendMenu(g_hPopUpMenu(TopMNU), _
                                MF_SEPARATOR, &O1, vbNullString)
                        End If
                    Case 2
                        g_Rt(TopMNU) = AppendMenu(g_hPopUpMenu(TopMNU), MF_STRING, _
                            IDM_MU + .Cells(2 + RowNum, 5), .Cells(2 + RowNum, 2))
                        g_APIMacro(MacroNum) = .Cells(2 + RowNum, 3).Text
                        MacroNum = MacroNum + 1
                    Case 3
                        g_hPopUpSubMenu(SubMNUItem) = CreatePopupMenu()
                        g_Rt(TopMNU) = AppendMenu(g_hPopUpMenu(TopMNU), MF_POPUP, _
                            g_hPopUpSubMenu(SubMNUItem), .Cells(2 + RowNum, 2))
                        SubMNUItem = SubMNUItem + 1
                     Case 4
                        g_Rt(TopMNU) = AppendMenu(g_hPopUpSubMenu(SubMNUItem - 1), _
                            MF_STRING, IDM_MU + .Cells(2 + RowNum, 5), .Cells(2 + RowNum, 2))
                        g_APIMacro(MacroNum) = .Cells(2 + RowNum, 3).Text
                        MacroNum = MacroNum + 1
                    End Select
                RowNum = RowNum + 1
            Loop
        Next TopMNU
    End With

    End Sub

    Public Sub RunAPIMNUMacro(strMacroName As String)
        On Error Resume Next
        Application.Run (strMacroName)
        If Err Then
            MsgBox "Error number:=" & Err.Number & vbCrLf & _
                "Description:=" & Err.Description & vbCrLf & _
                "Check yur macro names!", vbCritical + vbMsgBoxHelpButton, _
                "Menu Macro Error", Err.HelpFile, Err.HelpContext
        End If
        Err.Clear
    End Sub

    agar kita bisa membedakn module yang itu maka gantilah nama module itu dengan basAPIMNU.
  5. Buat lagi module yang kedua sekarang ketikan kode berikut:

    6. Option Explicit

    Public Declare Function CallWindowProc _
        Lib "user32" _
            Alias "CallWindowProcA" ( _
                ByVal lpPrevWndFunc As Long, _
                ByVal hwnd As Long, _
                ByVal Msg As Long, _
                ByVal wParam As Long, _
                ByVal lParam As Long) _
             As Long

    Private Const WM_COMMAND = &H111
    Private Const WM_MENUSELECT As Long = &H11F
    Public g_lpMyWndProc As Long
    Public Const GWL_WNDPROC = (-4)

    Public Function HookWinProc(ByVal hw As Long, ByVal uMsg As Long, _
        ByVal wParam As Long, ByVal lParam As Long) As Long

        If uMsg = WM_COMMAND Then
            DoEvents
            Call RunAPIMNUMacro(g_APIMacro(wParam - IDM_MU))
        End If
        HookWinProc = CallWindowProc(g_lpMyWndProc, hw, uMsg, wParam, lParam)
      
    End Function
    Gantilah module itu dengan nama basAPIMNU_hook
  6. Buat lagi module yang ketiga sekarang ketikan lagi kode berikut:


    7. Sub Loader()

        #If VBA6 Then
            frmTask.show
        #Else
            Sorry
        #End If

    End Sub

    Sub Sorry()
        Dim Msg As String

        Msg = "Sorry .... dosen't run on Versions <2000 font=" ">
        MsgBox Msg, vbExclamation
        'Application.UserControl = False
        'Application.IgnoreRemoteRequests = True
    End Sub

    Ganti nama module dengan nama BasAPIMNU_loader
  7.  buat lagi module ketikan kode berikut :

    8. Sub Kasbpnpm()
    MsgBox "Percobaan Menu"
    End Sub
    Ganti nama module itu dengan nama basAPIMNU_routines
     
    Module dengan nama basAPIMNU_Routines  Berfungsi untuk membuat kode macro dari setiap menu yang kita buat 

Itu adalah persiapan Userform dan module pada jendela visual basic untuk langkah selanjutnya kita harus mempersiapkan file excel agar menu tersebut berjalan Untuk file membuat menu pada userform excel tidak saya jelaskan di sini bisa dilihat dan di coba pada file yang telah saya sediakan di sini. dan inilah contoh animasi dari menu pada userform excel.
menu userform excel

Categories:

Sabtu, 22 April 2017

Membuat game dengan Html

April 22, 2017 Leave a Reply

Membuat game dengan html

Html adalah kependendekan dari Hypertext mark up language, merupakan bahasa pemograman yang biasa digunakan oleh para web designer. file html bisa dibuat dengan menggunakan text editor notepad, yang secara otomatis sudah terinstall pada saat kita menginstall window. Jadi untuk mempraktekan tutorial ini sangatlah mudah hanya dengan mencari program notepad di komputer yang kita miliki, lalu kita mengetikan kodenya.

Penulisan Kode html biasanya di mulai dengan menuliskan tag html seperti <html> dan di akhri dengan </html>. itu adalah pengetahuan dasar tentang penulisan kode-kode html. Kali ini saya akan berbagi pengetahuan bagaimana cara membuat game dengan menggunakan kode html tersebut. Ini adalah contoh game yang akan kita buat.









Untuk membuat game seperti di atas kita tinggal Membuka Program Notepad Kemudian Kita Ketikan Kode Html berikut :
<!DOCTYPE html>
<html>



<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: white;
}
</style>


 
     
      <div class="w3-row-padding w3-padding-xxlarge">
        <div class="w3-col m4">
         
      
      </div>
    
    </div>
   
   
    
  



<div class="w3-main w3-light-grey" id="belowtopnav" style="margin-left:20px;">
  <div class="w3-row w3-white">
    <div class="w3-col l10 m12" id="main">
    
<div id="myfilter" style="position:absolute;background-color:#000000;opacity:0.3;width:500px;height:250px;display:none"></div>
<div id="myrestartbutton" style="position:absolute;padding-top:90px;padding-left:220px;display:none;"><button onclick="restartGame()">Restart</button></div>
<div id="canvascontainer"></div>
<br>
<div style="text-align:center;width:500px;">
  <button ontouchstart="moveup()" onmousedown="moveup()" onmouseup="clearmove()">UP</button><br><br>
  <button ontouchstart="moveleft()" onmousedown="moveleft()" onmouseup="clearmove()">LEFT</button>
  <button ontouchstart="moveright()" onmousedown="moveright()" onmouseup="clearmove()">RIGHT</button><br><br>
  <button ontouchstart="movedown()" onmousedown="movedown()" onmouseup="clearmove()">DOWN</button>
</div>
<br>

<script>

var myGameArea;
var myGamePiece;
var myObstacles = [];
var myscore;

function restartGame() {
document.getElementById("myfilter").style.display = "none";
document.getElementById("myrestartbutton").style.display = "none";
myGameArea.stop();
myGameArea.clear();
myGameArea = {};
myGamePiece = {};
myObstacles = [];
myscore = {};
document.getElementById("canvascontainer").innerHTML = "";
startGame()
}

function startGame() {
    myGameArea = new gamearea();
    myGamePiece = new component(30, 30, "red", 10, 75);
    myscore = new component("15px", "Consolas", "black", 220, 25, "text");
    myGameArea.start();
}

function gamearea() {
    this.canvas = document.createElement("canvas");
    this.canvas.width = 500;
    this.canvas.height = 250;   
    document.getElementById("canvascontainer").appendChild(this.canvas);
    this.context = this.canvas.getContext("2d");
    this.pause = false;
    this.frameNo = 0;
    this.start = function() {
        this.interval = setInterval(updateGameArea, 20);
    }
    this.stop = function() {
        clearInterval(this.interval);
        this.pause = true;
    }
    this.clear = function(){
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    }
}

function component(width, height, color, x, y, type) {

    this.type = type;
    if (type == "text") {
        this.text = color;
    }
    this.score = 0;    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;   
    this.x = x;
    this.y = y;   
    this.update = function() {
        ctx = myGameArea.context;
        if (this.type == "text") {
            ctx.font = this.width + " " + this.height;
            ctx.fillStyle = color;
            ctx.fillText(this.text, this.x, this.y);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash = true;
        if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
            crash = false;
        }
        return crash;
    }
}

function updateGameArea() {
    var x, y, min, max, height, gap;
    for (i = 0; i < myObstacles.length; i += 1) {
        if (myGamePiece.crashWith(myObstacles[i])) {
            myGameArea.stop();
            document.getElementById("myfilter").style.display = "block";
            document.getElementById("myrestartbutton").style.display = "block";
            return;
        }
    }
    if (myGameArea.pause == false) {
        myGameArea.clear();
        myGameArea.frameNo += 1;
        myscore.score +=1;       
        if (myGameArea.frameNo == 1 || everyinterval(150)) {
            x = myGameArea.canvas.width;
            y = myGameArea.canvas.height - 100;
            min = 20;
            max = 100;
            height = Math.floor(Math.random()*(max-min+1)+min);
            min = 50;
            max = 100;
            gap = Math.floor(Math.random()*(max-min+1)+min);
            myObstacles.push(new component(10, height, "green", x, 0));
            myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
        }
        for (i = 0; i < myObstacles.length; i += 1) {
            myObstacles[i].x += -1;
            myObstacles[i].update();
        }
        myscore.text="SCORE: " + myscore.score;       
        myscore.update();
        myGamePiece.x += myGamePiece.speedX;
        myGamePiece.y += myGamePiece.speedY;   
        myGamePiece.update();
    }
}

function everyinterval(n) {
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

function moveup(e) {
    myGamePiece.speedY = -1;
}

function movedown() {
    myGamePiece.speedY = 1;
}

function moveleft() {
    myGamePiece.speedX = -1;
}

function moveright() {
    myGamePiece.speedX = 1;
}

function clearmove(e) {
    myGamePiece.speedX = 0;
    myGamePiece.speedY = 0;
}
startGame();

</script>
</div>
</div>

</html>

Simpanlah kode di atas dengan nama gamehtml.html, nah itulah contoh sederhana membuat game dengan html.
html.


Categories:

5 Hikmah Puasa Ramadhan

April 22, 2017 Leave a Reply
Sebentar lagi kita akan memasuki bulan ramadhan, di bulan ramadhan itu ada kewajiban bagi setiap muslim untuk melaksanakan ibadah puasa yang dalam bahasa al-qur'an di sebut shaum. banyak keterangan-keterangan yang menyebutkan tentang hikmah puasa ramadhan.Hikmah Puasa ramadhan sebaiknya kita ketahui agar kita mempunyai untuk melaksanakannya.

Tidak sedikit di antara ummat muslim menjelang ramadhan itu merupakan pekerjaan berat, karena harus menahan makan, dan minum di siang hari, bahkan bagi sebagian lagi mereka dengan sembunyi-sembunyi tidak melaksanakannya.Mungkin mereka itu belum tahu hikmah dari melaksanakan puasa di bulan ramadhan.

Kenapa kita harus melaksanakan puasa di bulan ramadhan? pertanyaan itu mungkin muncul di benak kita, jawabannya pun mungkin sudah ada di benak kita. Mungkin setiap muslim sudah tahu tentang perintah melaksanakan puasa di bulan ramadhan, karena puasa di bulan ramadhan itu merupakan salah rukun islam yang ke empat. 

Jadi sebenarnya belum dikatakan muslim kalau kita melaksanakan puasa di bulan ramadhan tanpa alasan.karena bagi muslim dengan alasan tertentu bisa untuk tidak melaksanakan puasa di bulan ramadhan Ayat yang memerintahkan puasa di bulan ramadhan ada pada surat al-baqarah ayat 183 dan 184.

"Wahai orang-orang yang beriman!Diwajibkan atas kamu berpuasa sebagaimana diwajibkan atas orang sebelum kamu agar kamu bertaqwa," Qs. al-Baqarah :183.

"(Yaitu) beberapa hari tertentu. maka barangsiapa di antara sakit atau dalam perjalanan (lalu tidak berpuasa), maka (wajib mengganti) sebanyak hari (yang dia tidak berpuasa) pada hari-hari lain. dan bagi orang-orang yang berat menjalankannya, wajib membayar fidyah, yaitu memberi makan seorang miskin. tetepi barang siapa dengan kerelaan hati mengerjakan kebajikan, maka itu lebih baik baginya, dan puasa itu lebih baik bagi kamu jika kamu mengetahui."Qs al-baqarah : 184.

Sumber Alquran dan terjemahannya : Al_Hikmah Penerbit Diponegoro.

Jadi dari ayat tesebut jelas puasa lebih bagi daripada qadha dan fidyah, namun ada ruhshoh bagi orang yang tidak mampu menjalankannya.

Lalu apa Hikmah dibalik perintah Puasa di bulan ramadhan, tentunya banyak hikmah puasa di bulan ramadhan, tapi saya akan memberikan 5 Hikmah puasa di bulan ramadhan :

  1. Orang yang berpuasa akan bahagia ketika berbuka, pada waktu maghrib atau setelah selesai melaksanakan puasa selama sebulan penuh.
  2. Orang yang berpuasa akan menjaga sikap karena mereka tidak mau puasanya sia-sia, jadi hal ini akan membuat tenang bagi dia dan lingkungannya karena senantiasa berupaya tidak membuat pertikaian.
  3. Ada sifat hemat, karena selama seharian mengurangi porsi makan, walaupun biasanya pada bulan puasa itu makanan senantiasa dilebih-lebihkan, namun dari segi kwantitas pasti berkurang, karena hanya makan 2 kali saja dan daya tampung perut pasti terbatas.
  4. Adanya semangat meningkatkan ibadah karena pada bulan ramadhan pahalanya di lipatgandakan.
  5. Sarana untuk meningkatkan ketaqwaan.

Nah itulah 5 hikmah puasa di bulan ramadhan semoga kita mampu melaksanakannya dan menjalankannya dengan penuh amalan, dan senantiasa puasa ramadhan kita diterima di sisi Allah swt. amiin.
al baqarah 183



 

Categories:

Jumat, 21 April 2017

Conditonal Formatting Excel

April 21, 2017 Leave a Reply
Conditional Formatting adalah cara cepat untuk memberikan informasi cell dengan memberikan warna atau format yang berbeda, conditional formatting akan berjalan atau berlaku apabila memenuhi condisi tertentu. conditional itu dapat dibuat dengan menggunakan formula atau rumus, 

Arti dari conditonal formatting, suatu cell akan memiliki format yang berbeda apabila cell tersebut memiliki condisi seperti pada rumus yang tertulis di formula conditional formatting.

Penggunaan Conditional formatting ini sangat diperlukan untuk mengetahui data-data yang diperlukan.misalnya kita bisa mengetahui data yang sama dari deretan data di dalam cell.cell.

Contoh Penggunaan condtional formatting di excel:

  1. Untuk memberikan format yang berbeda apabila cell tersebut mempunyai nilai yang lebih besar dari ...
  2. Untuk memberikan format yang berbeda apabila cell tersebut mempunyai nilai yang lebih kecil dari ...
  3. Untuk memberikan format yang berbeda apabila cell tersebut mempunyai nilai sama dengan ....
  4. Untuk mengetahui format yang berbeda apabila cell tersebut mempunyai nilai teks .....
  5. Untuk mengetahui format yang berbeda apabila cell yang mempunyai data yang sama.
 Berikut adalah Langkah Langkah untuk pengerjaan conditional formating di atas

conditional_formatting



  1. Bukalah FIle Excel
  2. Pilih Menu Home 
  3. Pada bagian style pilih conditional formatting-High Cell Rules -Greather than apabila kita ingin memberikan format jika lebih besar dari .... Less Than Jika Kurang dari .. Equal to jka akan memberikan nila yang sama dengan. A date ocurring ... jika data tersebut berisi format date dengan tanggal ...., Duplicate value jika kita akan mencari data yang bernilai sama.
 Untuk greater than dan less than kita masukan nilainya misal ketika kita mengaktifkan cell lalu kita pilih greater than sehingga tampil kotak dialog berikut
greater
maka kita isi di bawah format cells are GREATER THAN dengan angka 2, maka jika kita isi dengan angka yang lebih besar dengan 2 maka format cell itu akan berubah.

Selanjutnya sama saja untuk conditional formatting yang lainya, sedangkan untuk mengisi duplicate value maka conditional formattingnya harus melebih satu cell, atau blog deretan data yang akan kita cari nilai yang samanya kemudian pilih contional formatting kemudian pilih duplicate value maka secara otomatis data yang sama akan memilik format yang berbeda.

Nah itulah cara menggunakan conditional formatting pada excel, semoga bermanfaat.
Categories: