Wednesday 9 November 2016

Pengertian dan Konsep Dasar Pemrograman Java

Assalamu'alaikum wr. wb

Java sebagai salah satu bahasa pemrograman baru menjanjikan banyak kemudahan bagi programer junior maupun senior. Tutorial ini akan membawa Anda mengenal lebih jauh bahasa ini melalui pembahasan konsep model perancangan dan petunjuk sederhana penggunaannya.

Apakah Java?

Java adalah bahasa pemrograman berorientasi objek yang dikembangkan oleh Sun Microsystems sejak tahun 1991. Bahasa ini dikembangkan dengan model yang mirip dengan bahasa C++ dan Smalltalk, namun dirancang agar lebih mudah dipakai dan ­platform independent, yaitu dapat dijalankan di berbagai jenis sistem operasi dan arsitektur komputer­­. Bahasa ini juga dirancang untuk pemrograman di Internet sehingga dirancang agar aman dan portabel.

Platform Independent

Platform independent berarti program yang ditulis dalam bahasa Java dapat dengan mudah dipindahkan antar berbagai jenis sistem operasi dan berbagai jenis arsitektur komputer. Aspek ini sangat penting untuk dapat mencapai tujuan Java sebagai bahasa pemrograman Internet di mana sebuah program akan dijalankan oleh berbagai jenis komputer dengan berbagai jenis sistem operasi. Sifat ini berlaku untuk level source code dan binary code dari program Java. Berbeda dengan bahasa C dan C++, semua tipe data dalam bahasa Java mempunyai ukuran yang konsisten di semua jenis platform. Source code program Java sendiri tidak perlu dirubah sama sekali jika Anda ingin mengkompile ulang di platform lain. Hasil dari mengkompile source code Java bukanlah kode mesin atau instruksi prosesor yang spesifik terhadap mesin tertentu, melainkan berupa bytecode yang berupa file berekstensi .class. Bytecode tersebut dapat langsung Anda eksekusi di tiap platform yang dengan menggunakan Java Virtual Machine (JVM) sebagai interpreter terhadap bytecode tersebut.

JVM sendiri adalah sebuah aplikasi yang berjalan di atas sebuah sistem operasi dan menerjemahkan bytecode program Java dan mengeksekusinya, sehingga secara konsep bisa dianggap sebagai sebuah interpreter. Proses pengeksekusian program Java dapat dilukiskan seperti di Gambar 1. Dengan cara ini, sebuah program Java yang telah dikompilasi akan dapat berjalan di platform mana saja, asalkan ada JVM di sana.

Kompiler dan interpreter untuk program Java berbentuk Java Development Kit (JDK) yang diproduksi oleh Sun Microsystems. JDK ini dapat didownload gratis dari situs java.sun.com. Interpreter untuk program Java sendiri sering juga disebut Java Runtime atau Java Virtual Machine. Interpreter Java, tanpa kompilernya, disebut Java Runtime Environment (JRE) dapat didownload juga di situs yang sama. Untuk mengembangkan program Java dibutuhkan JDK, sementara jika hanya ingin menjalankan bytecode Java cukup dengan JRE saja. Namun untuk mengeksekusi applet (sebuah bytecode Java juga) Anda biasanya tidak perlu lagi mendownload JRE karena browser yang Java-enabled telah memiliki JVM sendiri.

Library

Selain kompiler dan interpreter, bahasa Java sendiri memiliki library yang cukup besar yang dapat mempermudah Anda dalam membuat sebuah aplikasi dengan cepat. Library ini sudah mencakup untuk grafik, desain user interface, kriptografi, jaringan, suara, database, dan lain-lain.

OO

Java adalah bahasa pemrograman berorientasi objek. Pemrograman berorientasi objek secara gamblang adalah teknik untuk mengorganisir program dan dapat dilakukan dengan hampir semua bahasa pemrograman. Namun Java sendiri telah mengimplementasikan berbagai fasilitas agar seorang programer dapat mengoptimalkan teknik pemrograman berorientasi objek.

Sedikit perbandingan tambahan dengan bahasa C dan C++, Java banyak mewarisi konsep orientasi objek dari C++ namun dengan menghilangkan aspek-aspek kerumitan dalam bahasa C++ tanpa mengurangi kekuatannya. Hal ini mempermudah programer pemula untuk mempelajari Java namun mengurangi keleluasaan programer berpengalaman dalam mengutak-atik sebuah program. Di balik kemudahan yang ditawarkan Java, luasnya fasilitas library Java sendiri membuat seorang programer membutuhkan waktu yang tidak singkat untuk dapat menguasai penggunaan library-library tersebut.

Memulai Pemrograman Java

Untuk membuat program Java, seperti telah disebutkan sebelumnya, Anda membutuhkan JDK. Proses instalasi JDK tersebut sangat mudah dan tidak membutuhkan pengetahuan tertentu. Namun untuk menggunakannya Anda perlu melakukan beberapa penyesuaian dengan sistem operasi Anda. Umumnya yang perlu Anda lakukan adalah memasukkan path ke direktori JDK Anda ke setting path pada sistem operasi Anda. Misalkan direktori JDK Anda adalah C:\jdk1.4 maka pada Windows 98 Anda cukup menambahkan baris perintah SET PATH=C:\jdk1.4\bin pada file autoexec.bat Anda. Untuk Windows NT/2000/XP Anda cukup menambahkan direktori C:\jdk1.4\bin pada variabel path di System Environment. Caranya: klik kanan ikon My Computer, pilih Properties. Kemudian pilih tab Advanced. Lalu klik tombol Environment Variables, cari variabel path, kemudian tambahkan path direktori JDK Anda ke dalam variabel tersebut. Untuk Linux, tambahkan baris perintah SET CLASSPATH=(direktori jdk Anda) ke file profile Anda. Untuk mencoba JDK, ketikkan perintah java dan javac pada shell prompt (atau DOS Command Prompt). Jika perintah tersebut sudah dikenali maka program java atau javac akan menampilkan sintaks penggunaan. Untuk kemudahan dan berbagai fasilitas tambahan Anda dapat menggunakan Integrated Development Environment (IDE) untuk bahasa Java seperti Visual Café dari Symantec atau JBuilder dari Borland.

Urutan langkah-langkah yang harus Anda lakukan untuk membuat sebuah program Java sederhana adalah:
  1. Membuat source code program dengan editor teks apapun. Ingat, file tersebut harus berekstensi .java dan case sensitive.
  2. Mengkompile source code dengan perintah javac. Misalnya: javac HelloWorld.java. Jika berhasil, hasilnya adalah file bytecode berakhiran .class.
  3. Mengeksekusi bytecode dengan perintah java. Parameter dari perintah ini adalah nama file hasil kompilasi tanpa ekstensi .class. Contoh: java HelloWorld.
Source Code
Berikut kode untuk HelloWorld.java:
public class HelloWorld
{
    public static void main(String[] args)
    {
        System.out.println("Apa Kabar Dunia?");
    }
}
Dan ini sebuah contoh lain, yaitu applet sederhana untuk menampilkan teks di applet. Sebutlah file ini bernama HelloWorldApplet.java:
import java.awt.Graphics;

public class HelloWorldApplet extends java.applet.Applet
{
    public void paint(Graphics g)
    {
        g.drawString("Apa Kabar Dunia?", 5, 25);
    }
}
Secara gamblang dapat diperhatikan bahwa struktur kedua program sangat mirip, dan hanya berbeda dalam konteks eksekusi. Kedua program ini akan dibahas lebih lanjut setelah kita membahas cara mengkompile dan mengeksekusi program tersebut.

Perlu diingat bahwa bahasa Java bersifat case sensitive, sehingga Anda harus memperhatikan penggunaan huruf besar dan kecil. Selain itu penulisan source code program tidak harus memperhatikan bentuk tertentu, sehingga Anda bisa saja menuliskan semua baris source code tersebut dalam satu baris asal Anda tidak lupa membubuhkan tanda titik koma (;), atau menuliskan tiap kata dalam satu baris tersendiri. Namun dianjurkan Anda mengikuti layout seperti pada contoh agar program Anda mudah dibaca dan dimengerti.

Kompilasi

Setelah kedua file disave dengan nama HelloWorld.java dan HelloWorldApplet.java, kita akan mengkompile kedua program tersebut dengan perintah:
prompt> javac HelloWorld.java
prompt> javac HelloWorldApplet.java
Setelah kedua file disave dengan nama HelloWorld.java dan HelloWorldApplet.java, kita akan mengkompile kedua program tersebut dengan perintah:

prompt> javac HelloWorld.java
prompt> javac HelloWorldApplet.java

Perlu diperhatikan bahwa direktori aktif Anda saat ini adalah direktori tempat Anda meletakkan file-file program tersebut. Anda tetap dapat mengkompile program Anda dari direktori berbeda dengan perintah:

prompt> javac (direktori program)/namafile.java

Setelah perintah ini selesai, Anda akan melihat bahwa telah tercipta dua buah file .class, yaitu bytecode hasil kompilasi source code kita.

Sintaks Program

Sekarang kita akan mencoba membahas elemen-elemen dalam kedua source code tersebut.

Pada awal Listing 2 kita menemukan perintah import. Pada tahap awal ini Anda perlu mengetahui bahwa pernyataan tersebut hanya berfungsi mempermudah penulisan metode atau dalam bahasa pemrograman lain disebut prosedur atau fungsi. Jadi Anda hanya perlu menulis Graphics sebagai pengganti java.awt.Graphics, karena kita telah mengimpor java.awt.Graphics.

Kemudian di masing-masing listing terdapat pernyataan public class. Pernyataan ini adalah pernyataan pembuka sebuah kelas. Kelas sendiri digunakan untuk menciptakan objek. Ingat bahwa Java berorientasi objek. Kata public di depannya berfungsi agar kelas tersebut dapat diakses oleh semua program lain. Untuk saat ini anggaplah objek sebagai suatu item yang dapat dimanipulasi oleh sebuah program. Dalam Listing 2 terdapat tambahan kata extends. Hal ini berarti kelas yang kita buat akan mewarisi sifat-sifat dari kelas yang kita extends. Dengan kata lain kita menjadikan kelas yang kita extends sebagai himpunan bagian dari kelas kita buat.

Kemudian kita menemukan baris pernyataan public static void main(String[] args) dan public void paint(Graphics g). Keduanya adalah pernyataan pembuka sebuah metode. Metode sendiri adalah kumpulan pernyataan untuk melakukan suatu tugas tertentu dalam kelas. Keduanya sebenarnya mempunyai fungsi yang sama namun dalam konteks yang berbeda. Dalam setiap aplikasi harus ada sebuah metode yang bernama main yang akan dieksekusi pertama kali saat program tersebut dieksekusi. Sementara dalam applet, metode yang pertama kali akan dieksekusi ketika applet diload adalah paint. Kata public di depannya mempunyai fungsi yang sama dengan kata public yang ada di depan baris permulaan kelas. Namun nantinya Anda akan menemukan juga bentuk lain seperti private dan protect yang akan kita bahas nanti.

Pada Listing 1 terdapat kata static pada pernyataan pembuka metode main. Hal ini berarti metode main tidak mengubah atau menggunakan objek yang diciptakan oleh kelas tersebut, sehingga dapat dikatakan berdiri sendiri dan tidak terikat dengan objek. Dalam metode main dalam aplikasi, parameternya adalah selalu String[] args, di mana args hanyalah sebuah nama dari objek array dari String. Array ini nantinya akan berisi parameter-parameter yang diberikan user sebagai argumen command line. Sementara Anda tidak perlu mengerti mengenai parameter tersebut, cukup diingat bahwa bentuk metode main harus selalu demikian.

Kemudian di dalam kedua metode pada kedua listing tersebut, kita menemukan sebuah pernyataan. Anda tentu dapat saja meletakkan lebih dari satu pernyataan dalam sebuah metode. Setiap pernyataan dalam sebuah metode dipisahkan oleh titik koma dan akan dieksekusi satu persatu. Kedua pernyataan pada listing ternyata memanggil sebuah metode lain yaitu metode println dan paint. Tentunya dapat Anda perhatikan bahwa untuk memanggil sebuah metode diperlukan tiga komponen yaitu:



  1. Objek yang ingin kita pakai. Dalam hal ini objek System.out dan Graphics g.
  2. Nama metode yang ingin kita pakai. Dalam hal ini println dan paint.
  3. Sepasang tanda kurung yang berisi informasi tambahan yang diperlukan oleh metode yang dipanggil, yaitu parameter.
Dalam Listing 1, pernyataan System.out.println("Apa Kabar Dunia?"); berarti carilah objek out dalam kelas System kemudian panggil metode println dari objek out dengan parameter berupa string "Apa Kabar Dunia?". Sedang dalam Listing 2, pernyataan g.drawString("Apa Kabar Dunia?", 5, 25); berarti carilah objek g kemudian panggil metode drawString pada objek g dengan parameter "Apa Kabar Dunia?”, 5, 25);.

Eksekusi

Setelah selesai membahas sintaks dasar Java dalam kedua listing, selanjutnya kita akan mencoba mengeksekusi kedua program ini. Untuk program pertama yang berupa aplikasi biasa, kita tinggal mengetikkan perintah java HelloWorld pada prompt dan pesan Apa Kabar Dunia? akan tampil di layar (atau mungkin di tempat lain, bergantung sistem operasi Anda). Sedangkan untuk applet kita mesti membuat sebuah file HTML sebagai pembungkus—atau pemanggilnya. Berikut diberikan contoh file HTML untuk membungkus applet yang kita buat.

<HTML>
  <HEAD>
    <TITLE>Coba Applet</TITLE>
  </HEAD>
  <BODY>
    <APPLET CODE="HelloWorldApplet.class" WIDTH=150 HEIGHT=25>
    </APPLET>
  </BODY>
</HTML>
Beri nama helloword.html dan simpanlah di direktori yang sama dengan lokasi file-file .java dan .class sebelumnya. Untuk mengeksekusi applet kita cukup membuka file HTML tersebut di browser yang Java-enabled atau mengetikkan perintah appletviewer namafile.html di prompt.

Cukup sekian.
Wassalamu'alaikum wr. wb

Friday 14 October 2016

Pengertian Selector, Property dan Value pada CSS

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:
Pengertian Selector, Property dan Value pada CSS
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

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

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

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:
  1. Tulis surat pada secarik kertas surat
  2. Ambil sampul surat atau amplop
  3. Masukkan surat kedalam amplop
  4. Tutup amplop surat dengan lem perekat
  5. Tulis alamat surat yang dituju, jika tidak ingat, lebih dahulu ambil buku alamat & cari alamat yang dituju, lalu tulis alamat tersebut pada amplop surat
  6. Tempelkan perangko pada amplop surat
  7. 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:
  1. Masukkan nilai Alas
  2. Masukkan nilai Tinggi>
  3. Hitung Luas (Alas * Tinggi)/2
  4. 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
  1. Untuk menghitung Luas Segitiga pertama Masukan nilai alas
  2. Kemudian masukan nilai tinggi
  3. Kemudian hitung dengan menggunakan rumus Luas = Alas * Tinggi / 2
  4. 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.

Referensi

- https://id.wikipedia.org
- http://indogalau.blogspot.co.id

Tuesday 27 September 2016

Trik Anti Copy Paste pada Artikel Blog

Assalamualaikum wr. wb
Hari ini saya  ingin memposting tentang bagaimana  mengunci artikel blog kita agar  tidak dapat dicopy oleh orang lain

A. Pengertian
Blog

Blog adalah bentuk Aplikasi Web. Pada dasarnya merupakan bagian dari situs website yang dapat diakses secara online yang memiliki fungsi utama memuat tulisan-tulisan dan gambar (dimuat dalam posting) pada setiap halaman web. Blog biasanya dikelola oleh pengguna tunggal (sebagian lainnya oleh beberapa penulis) dibuat sesuai dengan topik dan tujuan dari si pengguna blog tersebut.


  B. Latar Belakang

Media Blog pertama kali dipopulerkan oleh blogger.com, dimiliki oleh perusahaan Pyra Labs yang disebarluaskan pada Agustus 1999. Karena kepopuleran tersebut, Pyra Labs akhirnya diakuisisi oleh Google pada akhir tahun 2002. Semenjak itu, banyak terdapat aplikasi-aplikasi yang bersifat Open Source yang diperuntukkan kepada perkembangan para penulis blog tersebut.

 C. Manfaat & Tujuan
- sebagai media publikasi untuk menyalurkan ide atau catatan harian melalui   tulisan-tulisan yang di muat dalam posting
- Agar orang lain tidak dapat meniru artikel kita



D. Alat & Bahan 
- perangkat komputer
- akun blog
- koneksi internet



E. Tahap Pelaksanaan
1. Buka blogger dan login ke akun anda

2. Setelah itu klik Template lalu Edit HTML

3. Cari kode </head> dan letakkan kode berikut ini dibawah kode </head>



4. Lalu Simpan Template




F. Referensi
http://strukturkode.blogspot.co.id/2014/12/cara-agar-artikel-blog-tidak-bisa-di-copy-paste.html




Monday 26 September 2016

Apa itu Meta Tag

Apa itu Meta Tag
Assalamualaikum wr. wb
Hari ini saya memposting tentang meta tag
A. Pengertian
META tag adalah kunci untuk mendapatkan peringkat halaman web blogspot yang baik di hasil mesin pencari atau search engine. Untuk memahami deskripsi meta tag untuk blogspot dan website dengan jelas, Anda perlu terlebih dahulu memahami bagaimana cara kerja mesin pencari. Mengapa meta tag sangat penting untuk search engine? Mari kita bahas sama-sama fungsi meta tag di bawah

Image result for apa itu meta tag

Meta tag ditulis di antara <HEAD> dan </ HEAD> dalam dokumen html. Fungsi Meta tag dalam sebuah dokumen html memberikan informasi tentang berbagai aspek dari halaman web atau blogspot, baik dari nama penulis bahasa yang digunakan, judul dan kata kunci dari halaman web.  di masa lalu Mesin pencari internet, meta tag digunakan untuk rating halaman web.  Namun, penggunaan meta tag oleh webmaster situs dewasa ‘, menyebabkan mesin pencari utama seperti mesin pencari Google , Yahoo, MSN, dll untuk menghapus meta tag dari kriteria prioritas mereka.  Webmaster situs-situs dewasa menggunakan meta tag untuk memasukkan  kata kunci yang tidak relevan di situs Web mereka, untuk tujuan mengarahkan lalu lintas ke situs Web mereka.  Namun, meta tag tertentu dapat membantu robot mesin pencari dalam mengindeks halaman web Anda.  Robot mesin adalah  program kecil yang menelusuri halaman Web dan mengumpulkan data yang relevan dari halaman web dan membantu mesin pencari melakukan peringkat.



Jenis - Jenis Meta Tag
Meta Author (Penulis)
Meta author biasanya tersimpan nama penulis halaman web.  Email Id penulis juga dapat dimasukkan ke dalam meta tag ini.  Namun, meta tag ini tidak didukung oleh mesin pencari utama seperti Google, Yahoo atau MSN.
Sintaks: <METANAME=”nama author”CONTENT=”nama, id email”>


 Meta Content Language (Konten Bahasa)
Bahasa yang digunakan pada halaman Web, dapat dimasukkan dalam meta content language.  Beberapa robot mesin pencari menggunakannya untuk mengkategorikan halaman web dengan bahasa yang digunakan.
Syntax: <META HTTP-EQUIV=”Content-Language” CONTENT=”language”>


 Meta Content Type (Jenis konten)
Ini adalah salah satu meta tag yang paling penting.  Dianjurkan untuk menggunakannya untuk semua halaman web.  Penggunaan meta  inilah menyebabkan set karakter yang sesuai ditetapkan untuk dimuat, sebelum halaman web dimuat.
Sintaks: <meta http-equiv=”Content-Type” content=”content type, teks atau html”>


 Meta Description (Gambaran umum)
Ini adalah satu meta tag blogspot yang  penting. Memberikan Penjelasan atau gambaran umum tentang isi dari halaman web. Jumlah karakter yang disarankan tidak lebih dari 160 karakter dan Ini adalah bagian yang umumnya dicari oleh robot mesin pencari, untuk mengetahui kalimat yang dicari ada dalam halaman web
Syntax: <META NAME=”description” CONTENT=”ketikkan deskripsi disini”>


 Meta Keywords (kata kunci)
Bersama kata-kata dan frase dalam konten dan deskripsi, meta keyword juga sering digunakan oleh mesin pencari, untuk mengurutkan halaman web ke dalam hasil mesin pencari mereka.  Oleh karena itu, memberikan meta keyword ke halaman web terbukti sangat mengntungkan.
Sintaks: <META name=”keywords” CONTENT=”ketikkan kata kunci dipisahkan dengan tanda koma”>


Meta Title (Judul)
Meta Title ini berisi judul sama seperti judul pada tag HTML.  Anda dapat menggunakannya pada halaman web Anda juga.
Sintaks: <META NAME=”Title” CONTENT=”Page Judul Here”>



Meta Google
Meta Google khusus digunakan oleh mesin pencari Google.  Tag ini digunakan di halaman web untuk menghentikan Google untuk menampilkan kutipan atau konten cache.  Ada fitur lain juga, bahwa Anda dapat menentukan penggunaan meta tag Google.  Sebagai contoh, jika anda tidak ingin Google melakukan peringkat atau mempopulerkan link dari halaman web anda.



Meta Robot
Tujuan dari penggunaan meta robot ialah untuk menentukan halaman web yang mana saja boleh atau tidak  di-index oleh spider dan halaman web. Tag ini sangat penting sekali terutama jika sesuatu website menggunakan frame untuk navigasinya. Sudah tentu anda  tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine.
Format dasar dari meta robot adalah sebagai berikut :
<meta name=”robots” content=”index | noindex | follow | nofollow”>
Misalnya, jika Anda menghendaki agar spider membaca halaman utama, dan menelusuri semua tautan yang ada maka tambahkan perintah berikut ini :
<meta name=”robots” content=”index follow”>
Dengan perintah ini spider akan meng-index halaman utama Anda dan menjadwalkan untuk mengindex halaman-halaman lain yang bisa dicari melalui hyperlink (<a href=””>).
Perintah berikut ini akan menginstruksikan agar spider tidak melakukan index maupun penelusuran tautan yang ada pada suatu halaman web.
<meta name=”robots” content=”noindex nofollow”>

http://www.johanes.my.id/apa-itu-meta-tag-penjelasan-panduan-meta-tag-lengkap/

Semoga bermanfaat tentang meta tag 
Wassalamualaikum wr. wb.

Sunday 25 September 2016

Cara Membuat Tab Menu Horizontal Sederhana

Assalamualaikum wr. wb..
Postingan saya ini mungkin sedikit mirip dengan postingan sebelumnya karena sama-sama mengenai tab menu, bedanya yg kemarin tentang tab menu vertical, sekarang tab menu horizontal.

A. Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.  Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.  Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.  Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan. 

B. Latar Belakang 
CSS pertama kali bermula sejak munculnya SGML pada tahun 1970an. Sejak kemunculannya tersebut, CSS mengalami perkembangan yang sangat pesat. Format dasar CSS yang banyak kita gunakan sekarang ini merupakan ide dari seoang programmer bernama Hakon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada bulan Oktober 1994 (dalam konferensi W3C di Chicago, Illinois). Kemudian, beliau bersama-sama dengan seorang temannya yang bernama Bert Bos mengembangkan suatu standard CSS.

C. Manfaat & Tujuan
-css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website)
-dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik

D. Alat & Bahan 
- Laptop
- Aplikasi Text Editor


E. Tahap Pelaksanaan 

1. Pertama buka aplikasi Text Editornya 

2. Setelah itu buat script CSS nya terlebih dahulu, masih sama seperti postingan sebelumnya, kita membuat tab menu horizontal dengan menggunakan UL (Unordered LIst)





3. Lalu buat konten menunya berada di sebelah kiri







4. Kemudian buat tampilan link yang ada pada menu horizontal yang akan dibuat





5. Buat tampilan hover pada list menu horizontal






6. Terakhir buat script html nya untuk mengisi konten-konten untuk menu horizontal tersebut



F. Referensi
https://cahyonex.wordpress.com/2013/11/19/sejarah-dan-perkembangan-css/  http://www.w3schools.com/css/css_navbar.asp


G. Hasil & Kesimpulan 
Setelah menyimak script-scrip diatas, kita tahu bahwa, script css dapat memodifikasi tampilan suatu  web agar lebih menarik, contohnya tab menu diatas yang dapat di hover oleh pointer


Sekian tutorial dari saya, semoga bermanfaat buat semuanya. Terima kasih juga telah berkunjung & membaca artikel-artikel saya di blog ini..
Wassalamualaikum wr. wb.

Cara Membuat Tab Menu Vertical Sederhana

Assalamualaikum wr. wb..
Kali ini saya akan memposting cara membuat tab menu vertical pada web, menggunakan css.

A. Pengertian CSS 
CSS adalah singkatan dari Cascading Style Sheets. Berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.  Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.  Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.  Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.

 B. Latar Belakang 
 CSS pertama kali bermula sejak munculnya SGML pada tahun 1970an. Sejak kemunculannya tersebut, CSS mengalami perkembangan yang sangat pesat. Format dasar CSS yang banyak kita gunakan sekarang ini merupakan ide dari seoang programmer bernama Hakon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada bulan Oktober 1994 (dalam konferensi W3C di Chicago, Illinois). Kemudian, beliau bersama-sama dengan seorang temannya yang bernama Bert Bos mengembangkan suatu standard CSS.

C. Manfaat & Tujuan
-css adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website)
-dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.n


D. Alat & Bahan
- Laptop
- Aplikasi Text Editor
E. Tahap Pelaksanaan

1. Pertama buka text editor, aplikasi yang saya pakai adalah Sublime Text

 
2. Setelah itu buat script CSS nya terlebih dahulu, sebenarnya bisa juga jika script html nya terlebih dahulu. Kita buat untuk UL (Unordered List) nya karena kita membuat tab menu tersebut ,menggunakan list.



3. Kemudian buat lagi script list nya seperti dibawah ini




4. Untuk tampilan hover agar lebih menarik, kita bisa buat script dibawah ini



5. Terakhir buat script html untuk mengisi konten pada menu tersebut dengan script dibawah ini


6. Ini adalah hasil akhir dari script-script diatas.





F. Referensi
 https://cahyonex.wordpress.com/2013/11/19/sejarah-dan-perkembangan-css/
 http://www.w3schools.com/css/css_navbar.asp


G. Hasil & Kesimpulan 
Setelah menyimak script-scrip diatas, kita tahu bahwa, script css dapat memodifikasi tampilan suatu  web agar lebih menarik, contohnya tab menu diatas yang dapat di hover oleh pointer


Sekian tutorial dari saya, semoga bermanfaat buat semuanya. Terima kasih juga telah berkunjung & membaca artikel-artikel saya di blog ini..
Wassalamualaikum wr. wb.

Friday 23 September 2016

Mikrotik Terhubung ke Internet

MikroTik untuk dapat terhubung ke Internet perlu mengatur interface yang terhubung ke publik/Internet dan metodenya bermacam-macam diantaranya:
1. Manual Configuration
2. DHCP Client
3. Dial Up PPPoE
* Manual Configuration:

Jika menggunakan “Manual Configuration” ada beberapa tahap yang harus kita kon-

figurasi diantaranya: IP Address, Default Gateway, DNS.




# Petama setting Ip address secara manual pada ether1 yang menuju ke internet, Ip ini harus 1 range dengan ip internet yang sudah di dapatkan sebelumnya


# Setelah itu setting Ip Route, ini adalah bagian yang sangat penting karena disini adalah tempat setting IP Gateway, caranya cukup mudah dengan cara memasukan IP Address tujuan mikrotik agar bisa mengakses internet ke menu Route dan isi pada kolom “Gateway”
# DNS Server digunakan untuk resolving nama domain, contoh: google.com, detik.com, dsb.

Jika mikrotik melakukan cek koneksi “ping” ke IP Address bisa tetapi ke nama domain

misal Google.com tidak bisa reply kemungkinan DNS Servernya belum di Konfigurasi atau

DNS Server sedang bermasalah.



DNS Telkom Indonesia = (202.134.1.10) & (202.134.0.155)
DNS Nawala = (180.131.144.144) & (180.131.145.145)
DNS Google = (8.8.8.8) & (8.8.4.4)
# Langkah terakhir cek apakah mikrotik sudah terhubung ke internet, caranya :
Ping “google.com” pada terminal mikrotik.

* DHCP Client:
Jika menggunakan “DHCP Client” cukup konfigurasi DHCP Client pada MikroTik,
dengan syarat harus ada service DHCP-Server.
# Pertama buat DHCP Client agar Mikrotik secara otomatis mendapatkan IP dan DNS serta NTP apabila beri tanda “checklist” pada kotak pilihan tersebut, Untuk Interface pilih “ether1” kemudian “Apply”, secara otomatis Mikrotik akan langsung terhubung pada Internet dengan syarat sudah ada service DHCP Server yang sudah terhubung ke Internet sebelumnya


Terdapat beberapa parameter yang bisa disesuaikan dengan kebutuhan jaringan;
  • Interface : Pilihlah interface yang sesuai yang terkoneksi ke DHCP Server
  • Use-Peer-DNS : Bila kita hendak menggunakan DNS server sesuai dengan informasi DHCP 
  • Use-Peer-NTP : Bila kita hendak menggunakan informasi pengaturan waktu di router (NTP) sesuai dengan informasi dari DHCP
  • Add-Default-Route : Bila kita menginginkan default route kita mengarah sesuai dengan informasi DHCP
  • Default-Route-Distance : Menentukan nilai Distance pada rule routing yang dibuat secara otomatis. Akan aktif jika add-default-route=yes



# Langkah terakhir lakukan pengecekan apakah Mikrotik sudah terhubung ke Internet atau belum, dengan cara Ping “google.com”

 



* Dial-Up PPPoE:

Jika menggunakan “Dial-Up PPPoE” kita cukup konfigurasi PPPoE-Client untuk men-

Dial-Up PPPoE Server, pada cara ini kita diminta User dan Password untuk bisa me-

ngakses PPPoE Server.



# Pertama buat PPPoE Client pada Interface

# Pilihlah Interface yang sesuai yang terkoneksi ke PPPoE Server, masukan User & Password sesuai dengan yang telah anda dapatkan sebelumnya, dan berikan tanda “checklist” Use Peer DNS agar DNS kita tersetting secara otomatis dan pastikan tanda status bagian kanan bawah "connected"
# Selanjutnya langkah terakhir yaitu pengecekan, dengan cara Ping “google.com”

Tuesday 6 September 2016

Tutorial Instalasi Wordpress pada Linux Mint




Assalamualaikum wr. wbSekarang saya ingin sharing tentang tutorial menginstal wordpress di linux mint.








A. Pengertian

WordPress adalah sebuah aplikasi sumber terbuka (open source) yang sangat populer digunakan sebagai mesin blog (blog engine). WordPress dibangun dengan bahasa pemrograman PHP dan basis data (database) MySQL. PHP dan MySQL, keduanya merupakan perangkat lunak sumber terbuka (open source software). Selain sebagai blog, WordPress juga mulai digunakan sebagai sebuah CMS (Content Management System) karena kemampuannya untuk dimodifikasi dan disesuaikan dengan kebutuhan penggunanya. WordPress adalah penerus resmi dari b2/cafelog yang dikembangkan oleh Michel Valdrighi. Nama WordPress diusulkan oleh Christine Selleck, teman Matt Mullenweg. WordPress saat ini menjadi platform content management system (CMS) bagi beberapa situs web ternama seperti CNN, Reuters, The New York Times, TechCrunch, dan lainnya .
Rilis terbaru WordPress adalah versi 4.1.1 (18 Februari 2015). WordPress didistribusikan dengan Lisensi Publik Umum GNU.

B. Latar Belakang 

WordPress muncul pertama kali di tahun 2003  atau setelah blogger.com di populerkan,wordpress ini merupakan hasil kerja keras Matt Mullenweg dengan Mike Little. Yang membuat WordPress makin terkenal sehingga menjadi pesaing blogger.com,
wordpress menyediakan dua alamat yang berbeda, yaitu WordPress.com dan WordPress.org sama seperti halnya blogger, blogger juga ada dua alamat blogger.com dan blogspot.com.

 

C. Manfaat & Tujuan
1. Wordpress bisa digunakan oleh orang awam dan para developer
2. WordPress bisa diinstall ke dalam server kita sendiri
3. WordPress juga menyediakan server gratis apabila kita tidak punya server sendiri.


D. Alat & Bahan
1. Pc/Laptop
2. Pc/Laptop telah diinstal LAMPP
3. File Wordpress.zip


E. Tahap Pelaksanaan

1. download file wordpress.zip terlebih dahulu, jika sudah didownload copy file tersebut ke file system tepatnya di direktori html, /var/www/html.
2. Setelah itu buka terminal, kemudian buka direktori html.

kemudian #ls untuk melihat isi direktori html apakah sudah ada file wordpress.zip nya.


3. Setelah itu ekstrak file wordpress.zip pada terminal

kemudian ketik #ls lagi untuk melihat apakah file wordpressnya telah di ekstrak


4. Lalu beri hak ownership/kepemilikan dengan perintah chown -R www-data:www-data (nama folder)



5. beri hak akses




6. Buka tab baru lalu ketik "localhost/phpmyadmin" kemudian buat database baru dengan nama wordpress lalu Create.




7. Lalu buka tab baru dan ketikkan "localhost/wordpress", maka tampilan instalasi wordpress akan muncul seperti berikut.
kita pilih bahasa English saja lalu Enter/Continue



8. Setelah kita klik continue akan muncul tampilan syarat database seperti berikut lalu klik Let's go untuk melanjutkan.




9. Informasi koneksi database 


10. Setelah informasi koneksi database di atas telah diisi, klik submit. Tampilan jalankan instalasi akan muncul seperti berikut. Lalu klik Run the Install



11. Tampilan ini akan muncul kemudian isi kolom-kolom yang ada dengan informasi yang sesuai lalu pilih Install Wordpress.




12. Instalasi Wordpress berhasil, kemudian kita login ke wordpress.

 

13. Tampilan dashboard wordpress sudah muncul


 Jika sudah seperti ini kalian bisa mengoptimalkan wordpress dengan mengganti template/tema, menambahkan plugin dan masih banyak lagi fitur-fitur yang ada di wordress. Selamat Mencoba :)


F. Waktu Pelaksanaan

Sekitar 30 menit s/d 1 jam




 G. Referensi
 https://en.wikipedia.org/wiki/WordPress
 http://www.centerklik.com/wordpress-sejarah-lengkap-wordprss/


H. Hasil & Kesimpulan
Dalam menginstal CMS WordPress kita bisa menyimpulkan bahwa kita dapat mengoptimalkan wordpress dengan mengganti bahkan mengubah/mengedit isi dari wordpress tersebut, tidak lupa juga kita dapa memahami konsep yang terdapat dalam wordpress dan fungsinya.





Sekian dari saya. Semoga bermanfaat bagi kita semua. Terima kasih juga telah berkunjung ke blog saya dan membaca artikel saya ini ^^
Wassalamualaikum wr. wb