Apa Itu Scenario Diagram

Scenario Diagram adalah salah satu diagram yang digunakan untuk merepresentasikan sebuah sistem yang berjalan berdasarkan alur, Scenario Diagram sendiri adalah bagian dari UML ( Unified Modeling Language).

Scenario Diagram adalah UML favorit saya karena sangat mudah dibuat dan simple untuk dibaca alurnya, tidak terlalu kompleks untuk sebuah representasi sistem.

Contoh Scenario Diagram

Usecase : Login Member
Actor : Member
Pre-condition : Member Dalam Keadaan tidak Login
Post-condition : Member Sudah Login
Description : Member Harus Login Untuk Menampilkan Halaman Dashboard

Penjelasan Array (Sumber : Wikipedia)
Dalam ilmu komputer, larik (bahasa Inggris: array) adalah suatu tipe data terstruktur yang dapat menyimpan banyak data dengan suatu nama yang sama dan menempati tempat di memori yang berurutan (kontigu) serta bertipe data sama pula.
Larik dapat diakses berdasarkan indeksnya. Indeks larik umumnya dimulai dari 0 dan ada pula yang dimulai dari angka bukan 0. Pengaksesan larik biasanya dibuat dengan menggunakan perulangan (looping), array adalah suatu tempat untuk menyimpan banyak data sekaligus didalamnya.

Contoh : budi membeli buku A, buku B, buku C dan meletakkannya di lemari X
lemari X sebagai ARRAY adalah tempat menyimpan data yaitu BUKU tersebut.

sekarang mari kita implementasikan kedalam bentuk script menggunakan C++.

 1. Array Satu Dimensi

#include <iostream>
using namespace std;

int main(){
string lemariX[3] = {"A","B","C"};
}

Bagaimana jika budi ingin mengambil buku A?

dibawah line/baris dari string lemariX[3] = {"A","B","C"}; mari kita implementasikan menjadi kode seperti berikut :

cout << lemariX[0];

aduh bingung kenapa lemariX[0]?

sederhana saja, Array dimulai dari 0 , 0 memiliki arti data pertama, data pertamanya sudah jelas buku budi yang A, maka jika ditampilkan akan keluar output A yang berarti jika dimaksud pada dunia nyata budi telah berhasil mendapatkan buku A karena tau lokasi nya di lemari X.

2. Array Multi Dimensi

Bagaimana misalnya kalau budi...... mmh
apaan

misalnya budi pengen punya banyak lemari untuk buku yang berbeda beda.

misalnya lemari X tadi untuk buku apa saja (Semua Kategori)

 nah pengen buat lemari A,lemari B,lemari C untuk masing masing kategori buku dari A,B,C
anggap aja ya buku A,buku B,buku C tadi berbeda kategori... anggap aja ya! :D

nahh mari kita mulaiiiii!

#include <iostream>
using namespace std;

int main(){
string lemariX[3][3] = {{"A1"},{"B1"},{"C1"}};
}

misalnya budi ingin mengambil buku A1(ganti nama ya) dari lemari A, karena lemari A dan letak buku A1 ada di index pertama atau urutan pertama didalam array.

maka dibawah line/baris dari string lemariX[3][3] = {{"A1"},{"B1"},{"C1"}};
mari kita implementasikan menjadikan kode seperti berikut :

cout << lemariX[0][0];

maka akan didapati hasil A1 , ya berarti budi berhasil mengetahui lokasi dimana buku A1 berada pada lemari tersebut dan bisa mengambilnya hehehe.

Fungsi rekursif dalam pemrograman merupakan fungsi yang memanggil dirinya sendiri. Fungsi rekursif sering saya bayangkan seperti perulangan. Karena tingkah lakunya yang mengulang-ulang setiap pemanggilan dirinya. -Sumber : Petanikode.com
Iyap faktorial tentu saja berhubungan dengan perulangan, dengan menggunakan fungsi rekursif , kode akan semakin pendek dan program akan lebih efisien langsung saja kita ke kodenya..

#include
using namespace std;
int factorial(int x){
if(x == 0) return 1;
return x * factorial(x-1);
}

int main(){
cout << factorial(5);
}

Lalu hasil yang kita dapatkan adalah sebagai berikut :

1. Code editor yang support syntax highlighting dan package pembantu pengembangan software.

1. Sublime Text 
2. Visual Studio Code
3. ATOM

3 Code editor diatas saya yang paling memenuhi syarat UI/UX , dengan tampilan sederhana , 3 code editor tersebut menyediakan bermacam package mulai dari snippets,theme,completions beberapa bahasa pemrograman,plugin,dll.

kalian bisa mengecek pro kontra beberapa code editor di website ini https://mythemeshop.com/blog/code-editors/

2. Browser

 Pilihlah browser yang paling kompatibel dengan bahasa pemrograman , saya sendiri menggunakan Firefox.

3.  Perangkat Lunak yang membantu mengelola data dan menjalankan server

Siapa sih programmer yang gatau xampp, eittss selain xampp juga ada loh.
diantaranya :
1. LAMP
2. SAMP
3. MAMP
4. WAMP
5. Phpserv
6. dll


Sekian terimakasih, semoga tutorial tentang software yang dibutuhkan web programmer pemula ini bisa bermanfaat buat kalian semua :).

 

Langsung saja scriptnya

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .kotak{
            height: 500px;
            width: auto;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="kotak" class="kotak" onmouseover="over()">
      
    </div>
<script
              src="https://code.jquery.com/jquery-3.4.1.min.js"
              integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
              crossorigin="anonymous"></script>

<script>
    $('.kotak').mousemove(function(event){
        const x = Math.round((window.innerHeight / event.clientX) * 255);
        const y = Math.round((window.innerWidth / event.clientY) * 255);

        $('.kotak').css('background-color','rgb('+x+',0,'+y+')');
    });
</script>
<script>
    $('.kotak').mouseleave(function(){
        $('.kotak').css('background-color','blue');
    });
</script>


</body>
</html> 

Saya menggunakan jQuery untuk event handlingnya , kalian bisa saja menggunakan Vanilla Javascript (Native Javascript). 

CSS saya menggunakan rgb (Contoh: rgb(200,0,200))

jadi saya menggunakan hasil dari gabungan event window innerheight/width dan event client height/width.

logikanya ketika kursor bergerak (mousemove) akan otomatis mengganti hasil dari perhitungan dalam variabel x dan y lalu variabel x dan y akan digunakan untuk rgb pada background color yang mana akan terus berganti jika kursor bergerak valuenya.

1. MEMBUAT TEKS BERADA DI TENGAH PADA HTML DAN CSS

Buatlah file bernama textcenter.html lalu copy paste skrip dibawah ini :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

        p{

            text-align: center;

        }

        ul li{

            text-align: center;

        }

        div{

            background-color: blue;

            float: left;

            text-align: center;

        }

    </style>

</head>

<body>

    <center><h1>Hello World</h1></center>   

   

    <p>Hello World.</p>

   

    <ul>

        <li>Hello World.</li>

        <li>Hello World</li>

    </ul>

    <div>

        Hello WORLD

    </div>

</body>

</html>

 Setelah itu coba buka filenya, nanti akan diarahkan ke browser default kalian, dan bisa lihat hasilnya, teks sudah berhasil berada di tengah.. loh kenapa yang div nggak? karena yang dipentingkan adalah posisi float dari elementnya terlebih dahulu disamping teks yang berada didalamnya..

coba hapus
            background-color: blue;
            float: left;

otomatis teks akan berada ditengah karena tidak ada yang mencegah (prevent).


2. MEMBUAT ELEMEN BERADA DI TENGAH PADA HTML DAN CSS

Buatlah file bernama element.html lalu copy paste skrip dibawah ini :

<!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>test</title>

        <style>

           .block{
               height:50px;
               max-width: 50px;
               background-color:blue;
               margin: 10px auto;
           }

        </style>

    </head>

    <body>

        <div class="block">
      
        </div>

    </body>

    </html>

Elemen divnya berhasil dibuat ditengah dengan menggunakan perantara atribut 'class' lalu 

menggunakan margin: 0px auto; untuk membuat elemen tersebut berada ditengah. 

jika kalian ganti margin nya dengan text-align:center; tidak akan berjalan dengan baik dan malah membuat teks berada di kiri.

Jadi sekian saja tutorialnya ... lain kali saya share juga apa itu class pada html , width height, dan margin.

Wasalammualaikum warahmatullahi wabarakatuh.. See you on next post!