RESKY NOVALIA ~ BLC TELKOM

Archive for October 2016

Friday 14 October 2016

Pengertian Selector, Property dan Value pada CSS

Assalamualaikum wr. wb..
Kalian yang berminat dengan css, tapi masih belum paham dengan apa itu selector, property, dan value pada css, postingan ini mungkin bisa membantu.

Pengertian Selector CSS

Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘mengaitkan’ atau menghubungkan kode CSS dengan tag HTML yang sesuai. Hal inilah yang dimaksud dengan Selector dalam CSS.
Sesuai dengan namanya, selector digunakan untuk mencari bagian web yang ingin dimanipulasi atau yang ingin di-style. Misalnya : “cari seluruh tag <p>”, atau “cari seluruh tag HTML yang memiliki atribut class=”warning”” atau “cari seluruh link yang ada di dalam tag <p>”.
Selector paling dasar dari CSS adalah tag dari HTML itu sendiri, misalnya: tag p, i, h1, li, dll. Selector didalam CSS dapat menjadi kompleks tergantung kebutuhannya. Mengenai selector, akan kita bahas secara lebih detail dalam tutorial-turorial CSS selanjutnya.

Pengertian Property CSS

Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk seluruh selector. Jika selector digunakan misalnya untuk “mencari seluruh tag <p>“, maka property adalah “efek apa yang ingin dimanipulasi dari tag p tersebut“, seperti ukuran text, warna text, jenis fontnya, dll.

Pengertian Value CSS

Value CSS adalah nilai dari property. Misalkan untuk property background-color yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau nilainya dapat berupa red, blue, black, atau white.
Untuk lebih jelasnya tentang selector, property dan value pada CSS, dapat dilihat pada gambar dibawah ini:

Selector, Property dan Value ini adalah elemen inti dari CSS, 90% tutorial yang akan kita pelajari mengenai CSS akan membahas tentang ketiga aspek ini.

Sekian postingan saya, nanti akan ada postingan-postingan selanjutnya. Semoga bermanfaat, Wassalamualaikum wr. wb

Tuesday 11 October 2016

Cara Membuat Menu Dropdown Ketika diklik

in RPL on 01:54 No Comments

Assalamualaikum wr. wb.
Pada kesempatan kali ini saya ingin sharing cara membuat menu dropdown ketika di klik

Pengertian
Menu Dropdown adalah menu beralih yang memungkinkan pengguna untuk memilih salah satu object dari daftar yang tersedia.

Latar Belakang
Dalam pembuatan web yang memiliki banyak konten, akan memakan banyak tempat, dan menjadikan menu terlihat berantakan karena tersusun tidak rapi. Dengan adanya dropdown, kita dapat menghemat tempan untuk menu, dan tampilan web kita tetap cantik dan rapi.

Alat dan Bahan
1. Komputer atau Laptop.
2. Sublime text atau text editor lainnya.

Tahap Pelaksanaan
1. Buka sublime text atau text editor lainnya.
2. salin atau tulis kode di bawah ini

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdow:hover .dropbtn {
    background-color: red;
}

li.dropdow {
    display: inline-block;
}

.dropdow-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdow-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdow-content a:hover {background-color: #f1f1f1}

.show {display:block;}
</style>
</head>
<body>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">About</a></li>
<li class="dropdow">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">Dropdown</a>
    <div class="dropdow-content" id="myDropdow">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
</li>
</ul>
<script>
function myFunction() {
    document.getElementById("myDropdow").classList.toggle("show");
}

window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdow-content");
    for (var d = 0; d < dropdows.length; d++) {
      var openDropdow = dropdows[d];
      if (openDropdow.classList.contains('show')) {
        openDropdow.classList.remove('show');
      }
    }
}
}
</script>

</body>
</html>

3. Simpan dengan nama mencoba.html
4. Buka di browser anda, dengan cara CTRL+O

Referensi
www.w3schools.com

Learn Web Responsive

in RPL on 01:51 No Comments

Assalamualaikum wr.wb
Kali ini saya akan posting tentang web responsive, tentang web responsive saya pun sedang belajar, dan kurang faham. Namun saya akan share sedikit yang saya tahu tentang web responsive.

Sebelumnya kita buat dahulu kerangkanya dengan html, berbentuk seperti ini

Nah untuk css nya, saya sudah menyiapkan

*{ margin:0;padding:0; }
body{font-size:12px;font-family:verdana;}
#wrapper { 
 margin:auto; background: #fff; padding: 10px 0;width:1000px;
}
#header{
 width:100%;background:#EEE;
}
#content{
 float:left;background:#FFF;padding:10px;height:300px;width:600px;
}
#rightside{
 float:left;background:#ccc;padding:10px;height:300px;width:360px
}
#footer{
 clear:both;
 width:980px;
 background:#5F6354;
 color:#FFF;
 padding:10px
}

setelah membuat css, kita membuat resolusinya. Yang membuat web dapat beresolusi di tablet ataupun android.

berikut kodenya menggunakan @medi screen

@media screen and (max-width: 768px)  {
 #rightside { width: 98%;border-top:1px solid #2D2E2C; float:none; }
 #content { width:98%; float:none; }
 #wrapper{ width:98%; }
 #footer{ width:98%; }
}
img {
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
}

Algoritma Sebagai Dasar Pemrograman

in RPL on 01:48 1 Comment

Assalamualaikum wr. wb
Di kesempatan yang amat baik ini, saya akan membahas tentang Logika Algoritma. Banyak dari kita menyepelekan algoritma karena sudah merasa jago pemrograman. Padahal Logika Algoritma adalah dasar dari pemrograman.

Yuk simak lebih mendalam lagi !

Latar Belakang

Dan dengan mempelajari logika algoritma akan memudahkan kita walaupun kode programnya panjang. Dan dengan mempelajari logika algoritma akan memudahkan kita dalam mempelajari bahasa pemrograman apapum.

Tujuan

Agar kita dapat mengetahui pentingnya logika algoritma sebagai dasar dari pemrograman. Dan kita dapat menerapkan logika algoritma ketika membuat suatu program untuk memcahkan suatu masalah.

Pengertian

Logika algoritma adalah prosedur langkah-langkah untuk penghitunga. Algoritma digunakan untuk penghitungan, pemroses data, dan penalaran otomatis.

Selain itu, algoritma dapat di katakan sebagai metode efektif diekspresikan sebagai rangkaian terbatas dari instruksi-instruksi yang telah didefinisikan dengan baik untuk menghitung sebagai fungsi. Dimulai dari suatu kondisi awal dan input awal, instruksi-instruksi tersebut menjelaskan sebuah komputasi yang, bila dieksekusi, diproses lewat sejumlah urutan kondisi terbatas yang terdefinisi dengan baik, yang pada akhirnya menghasilkan keluaran dan berhenti di kondisi akhir. Transisi dari satu kondisi selanjutnya tidak harus deterministik; beberapa alhoritma, dikenal dengan dengan algoritma pengacakan, menggunakan masukan acak.

Asal kata algoritma muncul dari algoritmi, dan brntuk latin al-Khwarizmi, matematikawan, ahli astronomi, dan ahli geografi dari persia.

Asal mula.

Kata algoritma datang dari matematikawan persia abad ke-9 Abu Abdullah Muhammad Ibnu Musa Al-Khwarizmi, yang hasil kerjanya dibangun dari matematikawan India abad ke-7 Brahmagupta. Kata algorisma awalnya muncul hanya pada aturan-aturan dalam melakukan aritmetika menggunakan bilangan Hindu-Arab namun berkembang lewat penerjemahan Latin Eropa dari nama Al-Khwarizmi menjadi algoritma pada abad ke-18. Penggunaan kata tersebut berkembang mengikuti semua prosedur untuk menyelesaikan masalah melalui unit kegiatan.

Isi

Sebagai contoh Logika Algoritma dalam kehidupan sehari-hari :

1. Sebuah prosedur ketika akan mengirimkan surat kepada teman:

Tulis surat pada secarik kertas surat
Ambil sampul surat atau amplop
Masukkan surat kedalam amplop
Tutup amplop surat dengan lem perekat
Tulis alamat surat yang dituju, jika tidak ingat, lebih dahulu ambil buku alamat & cari alamat yang dituju, lalu tulis alamat tersebut pada amplop surat
Tempelkan perangko pada amplop surat
Bawa surat kekantor Pos untuk diserahkan pada pegawai Pos atau menuju ke bis surat untuk memasukkan surat ke dalam kotak/bis surat

2. Mengitung luas segitiga:

Masukkan nilai Alas
Masukkan nilai Tinggi>
Hitung Luas (Alas * Tinggi)/2
Dapat Hasil

Logika Algoritma mempunyai tiga format penulisan yaitu :

1. Deskriptif

Logika Algoritma bertipe Deskriptif maksudnya adalah logika algoritma yang ditulis dengan bahasa manusia sehari-hari (misalnya Bahasa Indonesia atau Bahasa Inggris). Setiap Langkahnya ditulis dalam satu kalimat atau lebih. Tidak ada aturan untuk penulisan algoritma bertipe Deskriptif ini. Semua kalimat ditulis dengan sistematis, jelas, terbatas dan berurutan.

Contoh :

Logika Algoritma menghitung_luas_segitiga

Untuk menghitung Luas Segitiga pertama Masukan nilai alas
Kemudian masukan nilai tinggi
Kemudian hitung dengan menggunakan rumus Luas = Alas * Tinggi / 2
Cetak Luas

2. Flow Chart

Logika Algoritma bertipe Flow Chart maksudnya adalah logika algoritma yang ditulis dalam bentuk diagram-diagram dengan anak panah sebagai penunjuk urutan langkah algoritmanya. Didalam Diagram terdapat Simbol-simbol yang mempunyai makna atau arti tersendiri. Anda bisa mencari Arti2 dari simbol2 tersebut di google.

3. Pseudocode

Logika Algoritma bertipe Pseudocode maksudnya adalah tiruan atau imitasi dari kode bahasa pemograman. Pada dasarnya, pseudocode merupakan suatu bahasa yang memungkinkan programer untuk berfikir terhadap permasalahan yang harus dipecahkan tanpa harus memikirkan syntax dari bahasa pemograman yang tertentu. Jadi pseudocode digunakan untuk menganmbarkan logika urut-urutan dari perogram tanpa memandang bagaimana bahasa pemorogramannya.

Contoh:

Algoritma menghitung_luas_segitiga

deklarasi:

luas,alas,tinggi : integer

deskripsi

read (alas)

read (tinggi)

luas ← alas * tinggi / 2

write (luas)

Kesimpulan

Dengan mengetahui Logika algoritma akan memudahkan kita menulis kode program agar kode program tersusun secara sistematis, efektif, tidak ketukar-tukar, dan yang pastinya tidak membingungkan kita walaupun programnya panjang.