Lexdorf Code: May 2014

Friday, May 30, 2014

Penjumlahan C++

Bahasan pada artikel sekarang yaitu kita akan membuat sebuat penjumlahan, dimana memasukan angka pertama dan kedua.

sederhana saja, dengan menggunakan cin untuk menyimpan inputannya. pada case ini, kita membutuhkan 3 variable , satu,dua,hasil.

berikut kodenya

main.cpp

#include<iostream>

using namespace std;

int main()

{

int satu,dua,hasil;

cout<<"Masukan angka pertama"<<endl;

cin>>satu;

cout<<"Masukan angka kedua"<<endl;

cin>>dua;

hasil=satu+dua;

cout<<"Hasil "<<satu<<"+"<<dua<<" = "<<hasil;

}

setelah pada artikel sebelumnya dibahas cara menampilkan sebuah tulisan. sekarang bagaimana caranya kita mulai bermain objek. dimana dengan menggunakan objek kita dapat meload sebuah fungsi secara terus menerus tanpa membuat kembali koding yang sama.

kalo masih bingung silahkan dipelajari konsep OOP.

main.cpp

//KODE C++

#include<iostream>
using namespace std;

class Objeknya
{
public:
void hello()
{
cout << "Hello C++ \n\n";

}

void nama()
{
cout << "Nama saya Deden Hendra Permana \n\n";

}
};

int main()
{
Objeknya o;

o.hello();

o.nama();

return 0;
}

Class Objek merupakan objek yang akan kita gunakan untuk di load. perhatikan kode berikut

int main()
{
Objeknya o;

o.hello();

o.nama();

return 0;
}

Objeknya o;
berarti kita meload class Objeknya dengan memberi nama baru / alias o.
o.hello()
berarti meload void hello
o.nama()
berarti meload void nama

Hello C++

sedikit flash back ke bahasa C dulu jon. didasari ingin ngoprek robotik dan controller dengan sangat semangat saya memulai kembali mempelajari C yang sudah sangat lampau tidak digunakan meskipun PHP ga beda jauh hehe

oke dimulai dengan memprint tulisan hello C++

main.cpp

//KODE C++
#include <iostream>
using namespace std;
int main()
{
cout << "Hello C++";
}

#include <iostream> merupakan library yang digunakan untuk meload cout .

Tuesday, May 6, 2014

Progress Bar EXTJS

progress.html
<html>
<html>
<head>
    <title>Progress</title>

    
    
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>

    
    <script type="text/javascript" src="progress.js"></script>

</head>
<body></body>
</html>

progress.js
Ext.onReady(function() {
    var pgb = Ext.create('Ext.ProgressBar', {
        text: 'Updating...',
        width: 200
    });

    var smenu = Ext.create('Ext.menu.Menu', {
        width: 200,
        plain: true,
        float: true,
        shadow: true,
        frame: true,
        items: [
            pgb
        ]
    });

    smenu.show();

    var prog = 0;

    setInterval(function() {
        prog = (prog + 5) % 105;

        pgb.updateProgress(prog / 100);
    }, 100);
});

GET Value By ID on EXTJS

form.html

<html>
<head>
    <title>Daftar</title>

    
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>

    
    <script type="text/javascript" src="form.js"></script>

</head>
<body>
    <div id="myform"></div>
</body>
</html>

form.js

Ext.onReady(function(){
         var simple = new Ext.form.FormPanel({
          standardSubmit: true,
          frame:true,
          title: 'Daftar',
          width: 350,

        defaults: {width: 230},
        defaultType: 'textfield',
               items: [{
                fieldLabel: 'NPM',
                name: 'npm',
                id:'npm',
                allowBlank:false
                               },
                               {
                     fieldLabel: 'Nama',
                name: 'nama',
                id: 'nama',
                allowBlank:false
                               },
                               {
                     fieldLabel: 'Kelas',
                name: 'kelas',
                id: 'kelas',
                allowBlank:false
                               },
                               {
                     fieldLabel: 'Alamat',
                name: 'alamat',
                id: 'alamat',
                allowBlank:false
                               },
                       {
                inputType: 'hidden',
                id: 'submitbutton',
                name: 'myhiddenbutton',
                value: 'hiddenvalue'
            }
        ],
        buttons: [{
            text: 'Submit',
            handler: function() {

                  Ext.Msg.show({
                    title: "Daftar",
                    msg: "NPM : "+Ext.getCmp('npm').getValue()+"<br> Nama : "+Ext.getCmp('nama').getValue()+"<br> Kelas : "+Ext.getCmp('kelas').getValue()+"<br> Alamat : "+Ext.getCmp('alamat').getValue(),
                    icon: Ext.Msg.INFO,
                    buttons: Ext.MessageBox.OK
                });
            }
        }]
    });
    simple.render('myform');
});

keterangan : allowBlank diartikan data boleh kosong atau tidak, jika kita mengisi dengan false, maka data tidak boleh kosong.

Alert EXTJS

alert.html

<html>
<head>
    <title>Alert</title>

    
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>

    
    <script type="text/javascript" src="alert.js"></script>

</head>
<body>
</body>
</html>

alert.js

Ext.onReady(function(){
Ext.Msg.show({
title: "Alert",
msg: "Hello World, This is sample alert ! ya-ha",
icon: Ext.Msg.INFO,
buttons: Ext.MessageBox.OK
});
});

Hello EXTJS

hello.html

<html>
<head>
    <title>Hello</title>

    
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>

    
    <script type="text/javascript" src="hello.js"></script>

</head>
<body>
</body>
</html>

hello.js

Ext.application({
    name: 'Hello ExtJS',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello ExtJS',
                    html : 'Hello ExtJS! My name is DEDEN HENDRA PERMANA'
                }
            ]
        });
    }
});

Thursday, May 1, 2014

Auto Submit with JavaScript

JavaScript menyediakan fasilitas untuk kita melakukan auto submit, dengan menggunakan fungsi submit(). berikut kodenya

<form name="myform" >
</form>
<script type="text/javascript">
function submitform()
{
document.myform.submit();
}
submitform();
</script>

Box Confirmation

dari kasus yang saya temukan ketika sedang menyelesaikan job, ada halaman yang tidak dizinkan untuk meninggalkan dan merefresh sebelum menyelesaikan pengisian, mungkin sudah tidak asing ketika anda menggunakan facebook, ada mengetikan sesuatu di form update status, lalu anda merefresh halaman tersebut sebelum mengupdate status tersebut.

apa yang akan terjadi ? sebuah kotak konfirmasi tampil untuk meyakinkan anda,apakah anda akan meninggalkan halaman ini? dengan catatan bahwa status yang belum anda update akan terhapus

berikut ini kodenya

<script type = "text/javascript">
var needToConfirm = true;
window.onbeforeunload = confirm;
function confirm() {
if (needToConfirm) {
return "Jika anda meninggalkan halaman ini, nilai anda akan 0";
}
}
</script>

Disable Refresh

anda tidak akan bisa mereload halaman ini dengan menggukan refresh atau f5.
berikut kodenya

<html >
<head >
    <title>Disable Refresh</title>

    <script type="text/javascript">

        var version = navigator.appVersion;

        function showKeyCode(e) {
            var keycode = (window.event) ? event.keyCode : e.keyCode;

            if ((version.indexOf('MSIE') != -1)) {
                if (keycode == 116) {
                    event.keyCode = 0;
                    event.returnValue = false;
                    return false;
                }
            }
            else {
                if (keycode == 116) {
                    return false;
                }
            }
        }

    </script>

</head>
<body onload="JavaScript:document.body.focus();" onkeydown="return showKeyCode(event)">
Kaga bisa direfresh jon coba aja haha
</body>
</html>