Yuk ! Move On Dari MySQL ke MariaDB

Yuk ! Move On Dari MySQL ke MariaDB

Bagi pembaca yang menggunakan aplikasi semacam XAMPP diwindows atau LAMP dilinux, mungkin kurang sadar kalau sebenarnya 2 aplikasi ini sudah tidak menggunakan Database MySQL.

Darimana saya tahu ?, saya mengamati ketika membuka phpmyadmin dan melihat nama servernya bukanlah MySQL tetapi berganti menjadi MariaDB (nb: ini untuk aplikasi XAMPP/LAMP versi terbaru).

Terus apakah ini akan menimbulkan masalah besar ?, jawabannya tidak , berikut penjelasannya.

Mengenal Apa itu MariaDB

MariaDB merupakan database hasil pengembangan dari MySQL, berbeda dengan MySQL yang dikembangkan oleh Oracel karna memang sudah diakuisisi oleh Oracel, MariaDB dikembangkan oleh komunitas yang sebelumnya juga ikut mengembangkan MySQL.

Karena MariaDB dikembangkan oleh komunitas bersama dengan pemilik asal dari MySQL yaitu Michael Widenius, tentu MariaDB menjadi aplikasi Open Source, berbeda dengan MySQL yang sekarang dikembangkan oleh Oracle.

Walaupun secara nama kedua database ini berbeda, tetapi MariaDB memiliki kompatibilitas terhadap semua API dari MySQL, sehingga apa yang berjalan diMySQL juga akan berjalan diMariaDB.

Alasan Pembuatan MariaDB

Setelah diakuisinya MySQL oleh Oracle, banyak orang yang meragukan dan khawatir pengembangan MySQL untuk kedepannya, takut apabila suatu saat MySQL menjadi Proprietary dari sebelummnya yang bersifat Open Source.

Maka sang pemilik dan pembuat dari MySQL melakukan Fork (copy) terhadap repository MySQl dan mengembangkannya menjadi Database baru yang memiliki banyak fitur serta akan seterusnya bersifat Open Source dengan nama MariaDB, yang diambil dari nama salah satu anaknya yaitu Maria. Sama dengan MySQL yang diambil dari nama anaknya yaitu My.

Apakah MariaDB kompatibel dengan MySQL

Sudah dijelaskan diatas apabila MariaDB mengadopsi seluruh API pada MySQL, sehingga semua perintah yang berjalan di MySQL juga akan berjalan sempurna bahkan lebih efektif di MariaDB.

Bahkan seluruh aplikasi yang menggunakan MySQL akan berjalan sempurna apabila menggunakan MariaDB, contohnya saja PHPMyAdmin.

MariaDB lebih baik dari MySQL

Kenapa saya bilang seperti ini ?, berikut alasannya

  1. Pengembangan MariaDB Lebih Terbuka dan Cepat

    Pengembangan MariaDB lebih terbuka dan cepat jika dibandingkan dengan MySQL. Oracle memang masih mengembangkan MySQL dan bahkan Oracle telah mempekerjakan pengembang baru MySQL yang kompeten setelah sebagian besar pengembang aslinya mengundurkan diri. Namun pada setiap rilis terbarunya MySQL, Oracle jarang mempublikasikan perubahan – perubahan pada MySQL, mungkin hanya sebagian perubahan yang dipublikasikan.

    Sedangkan pengembangan MariaDB sangat terbuka. Semua perubahan, penambahan fitur dan peningkatan dapat diketahui secara terbuka dan kita dapat berpartisipasi dalam pengembangannya pada mailing list publik yang telah dibuat sejak tahun 2009.

  2. Lebih Cepat dan Transparan Dalam Rilis Keamanan
    Oracle memiliki aturan dalam membuat rilis keamanan hanya setiap 3 bulan sekali untuk semua produknya dan rilis untuk fitur dan peningkatan MySQL setiap 2 bulan sekali. Kadang informasi rilis ini kurang jelas dikarenakan rilis antara keamanan dan peningkatan yang tidak sinkron. Juga pada catatan rilis MySQL tidak terdapat daftar CVE (Common Vulnerabilities and Exposures) yang telah diperbaiki, hal ini tentu membuat orang – orang bingung apakah bug atau celah CVE telah diperbaiki atau tidak.

    Sebaliknya, MariaDB mengikuti standar industri dalam merilis update keamanan dan fitur secara bersamaan. Juga setiap rilis terbaru MariaDB selalu memberitahukan CVE apa saja yang telah diperbaiki. Bahkan ketika ada CVE baru yang muncul, hanya dalam beberapa saat, update untuk memperbaiki bug tersebut sudah dirilis.

  3. Memiliki Banyak Jenis Storage Engine
    MariaDB memiliki banyak Storage Engine yang dapat diaplikasikan ke MariaDB seperti XtraDB, Aria, Cassandra, Spider, TokuDB dan lainnya bisa Anda lihat selengkapnya di halaman Storage Engine yang didukung MariaDB.

    Memang pada MySQL juga mendukung sebagian dari Storage Engine diatas, namun jika Anda ingin menggunakan Storage Engine tersebut Anda harus menggunakan pihak ketiga. Sedangkan MariaDB secara resmi mendukung storage engine diatas dan Anda dapat menggunakannya dengan lancar karena telah didukung secara resmi.

  4. Performa Yang Lebih Baik

    MariaDB mengklaim bahwa softwarenya memiliki kinerja yang lebih baik dalam query dan performa. Kebanyakan Benchmark yang dilakukan menunjukkan bahwa MariaDB lebih cepat daripada MySQL.

  5. Kompatibel dan Mudah untuk Migrasi dari MySQL

    Mulai dari MariaDB versi 5.5 merupakan versi yang 100% kompatibel dengan struktur data pada MySQL, jadi jika Anda ingin berpindah dari MySQL ke MariaDB, Anda tidak perlu khawatir terjadi masalah pada data lama Anda di MySQL karena MariaDB sudah dirancang untuk kompatibel dengan struktur data pada MySQL.

    Sebagai penutup, menurut kami MariaDB memiliki banyak keunggulan daripada MySQL. Bagaimana menurut Anda? Silahkan berikan komentar Anda dibawah.

Penutup

Jadi, secara keseluruhan MariaDB tetap akan menjadi database yang memiliki performa yang lebih baik dari pada MySQL, saya pribadi juga lebih menyukai MariaDB yang bersifat Open Source yang dimana saya merasa aman apabila ada suatu bug yang terjadi, maka update keamanannya akan cepat bahkan terjadi pada hari pelaporan bug itu juga

Mungkin dikesempatan mendatang saya akan membagikan Cara Installasi MariaDB, PHP, Apache disemua distro Linux, karena memang OS saya berbasis Linux juga.

Jangan biarkan ilmu berhenti pada satu titik saja, alirkan ilmu itu agar bermanfaat bagi orang lain juga.

Sekian apabila ada kesalahan tolong dikoreksi, dan apabila bermanfaat bisa anda bagikan keteman-teman anda.

Microsoft Windows adalah Malware !!!

Microsoft Windows Illustrator

Membaca judul diatas, mungkin kamu sebagai pengguna Sistem Operasi Windows akan merasa terkejut atau merasa tidak percaya, kok sistem operasi semacam Windows bisa termasuk kedalam Malware.

Mungkin saja kamu akan berfikir bahwasanya artikel ini merupakan HOAX semata, namun tentu artikel ini bukanlah HOAX, beberapa fakta dan bukti akan saya rangkum juga akan saya bagikan melalui tulisan ini.

Sebelum menuju ke pokok bahasan, alangkah lebih baik bila kamu mengetahui Apa sih malware itu ?

Malware merupakan software yang dibuat untuk tujuan membahayakan user dengan cara yang salah.

Berikut yang menyebabkan Windows bisa termasuk kedalam Malware.

  1. Microsoft Backdoor

    Backdoor merupakan sebuah “Pintu Belakang” yang digunakan seseorang untuk memasuki sistem secara illegal.

    Tanpa kamu sadari sebenarnya Microsoft, perusahaan yang memiliki Microsoft ternyata menanamkan sebuah Backdoor pada sistem operasi mereka, yang bukan lain adalah Windows.

    Kemudian, seberapa bergunakah backdoor ini bagi mereka ?. Dengan adanya backdoor yang terpasang pada sistem memungkinkan mereka untuk memasuki sistem milik user secara illegal dengan tujuan tertentu.

    Beberapa bukti yang saya temukan dilapangan antara lain,

    1. Disk Encryption

      Kamu tahu salah satu fitur pada Windows yang satu ini, yups Disk Encryption dengan aplikasi dari mereka yaitu Bitlocke, yang memiliki tujuan yang sangat “Mulia”, yaitu untuk mengenkripsi hardisk dari user sehingga hanya user tersebut yang mampu membuka kuncian itu.

      Tapi, apakah kamu yakin kalau kunci yang kamu miliki ini benar-benar hanya kamu yang memilikinya ?. Sebenarnya ketika kamu menghubungkan Windows kamu dengan akun Microsoft, Secara diam-diam pihak kunci dari hasil enkripsi hardisk kamu juga akan tersimpan pada server Microsoft.

      Disalah satu sisi ini bisa sangat menguntungkan, apabila suatu saat kamu kehilangan kunci tersebut.

      Namun dilain sisi, apakah kamu yakin bila kunci dari hardiskmu itu tidak digunakan oleh Pihak Microsoft untuk tujuan yang salah ?

    2. Auto Update

      Pernah nggak sih ketika Windows dengan santainya meng-update sistem mereka secara tiba-tiba atau tanpa konfirmasi, padahal fitur Windows Update telah mati ? hahaha, tentu kamu pernah mengalaminya jika kamu memang pengguna sistem operasi Windows ini.

      Nah, inilah yang diinginkan oleh Microsoft agar user dapat mengupdate sistem operasi milik mereka secara diam-diam. Sebenarnya Microsoft ini seperti memegang kendali penuh terhadap Pengaturan yang kamu setting.

      Masa sih Windows Update udah mati, kok masih saja sistem itu meng-update sendiri, rasanya jengkel bercampur marah pastinya, apalagi jika kamu yang memiliki kuota internet yang terbatas.

      Jadi intinya Microsoft bisa dengan leluasa mengatur pengaturan yang kamu terapkan kedalam sistem kamu.

    3. Penghapusan aplikasi secara Remote

      Maksudnya, Microsoft dapat dengan mudah untuk menghapus beberapa aplikasi yang kamu install secara jarak jauh dari Server mereka, dengan catatan bila kamu terhubung ke internet.

  2. Sabotase dari Microsoft

    Bingung dengan yang dimaksud dengan sabotase ini ?, jadi begini.

    Microsoft seolah-olah memaksa user untuk segera berpindah ke Sistem Operasi terbaru mereka yaitu Windows 10, dengan cara:

    1. Menghapus Support untuk Windows versi 7 dan 8
    2. Membuat Windows 7, 8 untuk tidak berfungsi dengan baik pada Komputer baru.
    3. Menghentikan support untuk Processor Intel generasi baru pada Windows 7, dan 8
    4. Memaksa pembaruan ke Windows 10 dari Windows Update, dengan mengabaikan pengaturan yang kamu tetapkan

Lalu bagaimana cara saya menangatasinya ?, jujur saya sendiri belum mengetahui cara untuk mengatasi hal-hal diatas, namun saya mulai dengan berkenalan dengan “Kebebasaan” yang diusung oleh GNU/Linux.

Kamu tidak perlu terburu-buru untuk bermigrasi ke Sistem Operasi lainnya, sebelumnya kamu harus menguatkan tekad dulu untuk bermigrasi, karena kamu akan selalu terbayang-bayang OS lama kamu bila kamu belum kuat tekadnya.

Mungkin sekian yang dapat saya sampaikan.

Referensi: https://www.gnu.org/proprietary/malware-microsoft.html

uGet: Download Manager Terbaik Untuk Seluruh Distro Linux

uGet Download Manager Terbaik Untuk Linux

uGet Download Manager atau yang biasa dikenal dengan uGetDM adalah sebuah software downloader yang paling umum digunakan oleh para pengguna Linux. Walaupun uGet banyak dikenal oleh kalangan pengguna Linux, namun secara resmi juga mendukung 4 Operasi Sistem lainnya, antara lain Android, BSD, Windows, dan Mac OSX. Namun diartikel ini penulis hanya akan membahas khusus bagi Linux User.

Secara umum uGet memiliki fitur yang tidak kalah bagus dengan downloader lainnya terutama IDM. Dari segi tampilan uGet menggunakan tampilan yang sangat Modern juga enak dipandang, juga pengorganisasian menu yang memudahkan users.

Fitur yang dimiliki oleh uGet antara lain:

  1. Downloads Queue

    Menempatkan unduhan anda ke dalam Antrean untuk mengunduh banyak atau sedikit unduhan yang seperti Anda inginkan secara bersamaan. Saat unduhan selesai, antrean akan mulai mengunduh file yang tersisa secara otomatis.

  2. Resume Downloads

    Jika koneksi Anda putus, Anda tidak perlu khawatir, Anda dapat memulai kembali unduhan untuk dilanjutkan. (nb: tidak ada jaminan, tergantung dengan server dan tidak dapat dilewati oleh pengelola unduhan).

  3. Advanced Download Categories

    Kategori tak terbatas untuk mengelola unduhan Anda.

  4. Clipboard Monitor

    Tentukan jenis file (melalui ekstensi) yang ingin anda monitor dan setiap kali Anda menambahkannya ke clipboard Anda akan diminta untuk mengunduh file yang disalin.

  5. Batch Downloads

    Memungkinkan pengguna untuk menambahkan jumlah file yang tidak terbatas pada satu waktu ke antrean untuk mengunduh

  6. Multi-Protocol
    Dukungan untuk mengunduh file melalui HTTP, HTTPS, FTP, BitTorrent & Metalink

  7. Multi-Connection (aka Multi-Segment)

    Memiliki kemampuan hingga 16 koneksi simultan PER download. Fitur Multi-Connection uGet juga menggunakan manajemen segmen adaptif yang berarti ketika satu segmen putus maka koneksi lain mengambil slack untuk memastikan kecepatan unduh yang optimal setiap saat. Ini juga berlaku untuk segmen yang menjadi sangat lambat karena keterbatasan server.

  8. FTP Login & Anonymous FTP

    Mendukung pengunduhan dari FTP anonim serta dukungan masuk melalui Nama Pengguna & Sandi untuk server FTP pribadi / terlindungi.

  9. Scheduler

    Penjadwalan ketika uGet diizinkan atau tidak diizinkan untuk mengunduh file.

  10. FireFox Integration via FlashGot

    Clipboard Monitor adalah yang Anda butuhkan untuk integrasi browser, tetapi FlashGot merupakan addon FireFox yang didukung secara terpisah sehingga kami membuatnya kompatibel dengan uGet.

  11. Quiet Mode

    Memungkinkan unduhan ditambahkan ke kategori tertentu secara otomatis dan mulai mengunduh secara otomatis, melompati dialog properti popup.

  12. Robust Keyboard Shortcuts

    Banyak pintasan keyboard seperti Ctrl + N (Baru), Ctrl + Q (Exit App) tetapi juga pilih unduhan dan tekan Delete untuk menghapus entri dari Riwayat Unduhan atau Shift + Delete untuk menghapus entri dan menghapus file yang diunduh . Cara pintas khusus pengunduhan lainnya termasuk Return & Shift + Return untuk membuka unduhan melalui aplikasi default & untuk membuka folder berisi unduhan masing-masing.

  13. Computer Shutdown After Completion

    Fitur opsional untuk mematikan komputer Anda setelah semua file selesai diunduh, cocok untuk sesi unduhan besar yang akan memakan waktu semalam saat Anda tidur.

  14. CLI / Terminal Usage Support

    Kemampuan untuk menggunakan baris perintah atau terminal untuk mengunduh file.

  15. Folder Auto-Creation

    Jika Anda menyediakan path untuk menyimpan file tetapi foldernya tidak ada uGet akan membuatnya untuk Anda secara otomatis untuk menyimpan file di sana.

  16. Download History Management

    Simpan riwayat unduhan untuk entri selesai dan entri daur ulang hingga 9.999 file per daftar, atau hapus entri terlama secara otomatis begitu batas kustom Anda telah dipenuhi.

  17. Multi-Language Support

    uGet mendukung 20 bahasa yang meliputi: Arab, Belarusia, China (Sederhana), China (Tradisional), Ceko, Denmark, Inggris (default), Prancis, Georgia, Jerman, Hungaria, Indonesia, Italia, Polandia, Portugis (Brasil), Rusia , Spanyol, Turki, Ukraina, dan Vietnam.

  18. Aria2 Plugin

    Aria2 & uGet mengintegrasikan untuk menyediakan GUI yang mudah digunakan untuk aplikasi Aria2 CLI. (^ * membutuhkan plugin aria2)

Dengan fitur-fitur yang banyak dan juga sangat bermanfaat bagi user linux, dan sekarang pertanyaannya Apakah teman-teman ingin menggunakan uGet ?. Bisa disimak diartikel selanjutnya ya. Maju terus Generasi Pinguin Indonesia.

Cara membuat tampilan yang responsive dengan HTML dan CSS

Setelah kemarin admin menulis tentang Apa itu responsive design dan seberapa penting bagi dunia ? , maka dikesempatan ini admin akan menulis tentang Beragam teknik untuk membuat desain yang responsive .

Didalam dunia Web Designer terutama untuk Front-End Programmer, pada umumnya untuk membuat sebuah tampilan dibutuhkan 2 hal, yaitu:

  1. Breakpoint

    Yakni patokan (ketentuan) yang berupa maksimal/minumal lebar maupun tinggi pada sebuah website. Pada Breakpoint ini umumnya memiliki satuan px (Pixel).

  2. Grid

    Secara umum dapat digunakan untuk membuat layout berupa kolom yang dapat diubah sesuai dengan ukuran layar, untuk satuannya programmer pada umumnya menggunakan satuan % (Persen).

Dengan 2 hal itu, programmer dapat membuat sebuah yang responsive nan indah.

Pada umumnya tampilan Mobile hanya akan memiliki satu Kolom yang memenuhi layar, hal ini tentu akan sangat menguntungkan bagi pembaca, karena akan mempermudah dalam melihat konten maupun tulisan yang ada. Untuk tampilan Desktop biasanya akan dibuat 2 buah kolom seperti pada gambar dibawah ini.

Responsive Web

Dari gambar diatas tentu kita sudah memiliki ide untuk membuat tampilannya. Dan tutorialnya bisa disimak dengan baik pada tulisan dibawah ini.

Pertama-tama, kita membuat file baru dilokasi yang sobat inginkan, namun penulis akan menyimpannya dilokasi /var/www/html/belajar-responsive/ karena penulis menggunakan sistem operasi Linux dalam pembuatan tutorial ini. Untuk nama file terserah sobat, tapi penulis akan beri nama tutorial1.html

Pembuatan File

Lalu masukkan kode dibawah ini dengan teks editor kesayangan sobat,

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
    <title>Belajar Responsive</title>
    </head>
    <body>

    </body>
</html>

Lalu coba jalankan dibrowser, apabila belum ada tampilannya tenang, memang begitu kok :-D. Untuk kode diatas pasti sudah tahu dong, kalo belum tahu tanyakan dikolom komentar ya :-).

Tampilan ketika dijalankan dibrowser

Kedua kita tambahkan teks agar kita tahu tampilannya, maka tambahkan kode ini diantara tags <body></body>

    <div id="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat delectus nihil, tenetur accusamus temporibus sunt vero inventore voluptas rerum ullam maiores a consequatur illo, accusantium animi soluta, sit fuga exercitationem asperiores cupiditate autem ipsum! Assumenda sed amet vero ratione nisi asperiores magnam possimus ut quibusdam cum quae, eius! Repudiandae, voluptatibus aliquid aperiam natus rerum sit, nisi id, obcaecati mollitia vel sequi beatae quos eaque. Rem illum adipisci, atque in sed iure cumque ut nulla, est fugiat ab beatae pariatur, quam qui fuga! Deleniti, voluptatum placeat nihil blanditiis sequi cum consequuntur ducimus fugiat ut minima, sit sapiente quidem autem odio ullam saepe itaque. Laborum mollitia sint, at molestias, non excepturi delectus velit harum provident nostrum nesciunt vel nam quisquam fuga a maiores repudiandae quo suscipit cupiditate voluptatum quas nemo. Ex quae accusantium illum, tenetur doloribus consequatur maxime cumque culpa quam velit quos sint cum provident sapiente, quo. Distinctio quam numquam saepe sed praesentium optio in? Laboriosam sequi ex excepturi, ad odit numquam consequuntur nisi id nam distinctio cumque ut ab pariatur ea est ratione optio temporibus, tempora cum! Fugiat quo pariatur, consequatur quas provident quaerat nesciunt, ipsum facilis architecto quam mollitia omnis eum a numquam voluptatum facere iusto impedit consequuntur eveniet?</div>
    <div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facilis eos cumque harum possimus sequi, placeat asperiores, dolor hic illo ad, ratione recusandae fugiat error praesentium perspiciatis consequatur explicabo. Tempora similique esse tempore tenetur qui at. Ex quos numquam voluptas maxime! Delectus assumenda, explicabo enim iure fugiat voluptas facilis, deserunt libero rerum eveniet deleniti vel repellendus eos voluptatibus labore saepe quaerat aspernatur voluptate similique suscipit quae placeat. Hic voluptas qui minus quas. Voluptatem amet quae corporis eius odit, possimus autem architecto excepturi obcaecati ipsum. Voluptates culpa quia harum fuga dolor laborum perspiciatis qui quasi officiis consequuntur! Perspiciatis nesciunt molestias dignissimos animi maiores necessitatibus accusamus fugit sint corporis omnis, repudiandae facere dicta, fuga aliquam quisquam facilis dolor asperiores natus ducimus illum reiciendis sequi</div>
    <div class="clearfix">&nbsp;</div>

Lalu jalankan dibrowser dan akan jadi seperti gambar dibawah,

Tampilan ketika ada teks

Ketiga, nah ini yang paling penting adalah memberi style (CSS) pada kode html tersebut. Masukkan kode dibawah ini diantara tags <head></head>

    <style>
        body,html {
            background: #fff;
            color: #222;
            margin: 0; /* Menghilangkan margin pada tags <body> */
            padding: 0; /* Menghilangkan padding pada tags <body> */
            text-align: justify; /* Membuat paragraf menjadi rata kanan-kiri */
            line-height: 1.5; /* Mengubah line-height (Spasi antar baris) */
        }
        #main {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 60%; /* Menetapkan ukuran lebar tags saat mengambang */
            background: #3170d9; /* Agar background menjadi biru */
            color: #fff; /* Mengubah warna fonts */
        }
        #sidebar {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 40%;  /* Menetapkan ukuran lebar tags saat mengambang */
            background: #d99c31; /* Agar background menjadi orange */
            color: #fff; /* Mengubah warna fonts */
        }
        .clearfix { /* Digunakan untuk membersihkan area yang tidak mengambang */
            display: table;
            clear: both;
            content: "";
        }
    </style>

Secara kasat mata tampilan berhasil dibuat tetapi itu masih belum responsive karena apabila ukuran layar diperkecil, tampilan akan sangat tidak manusiawi. Bisa dilihat pada gambar dibawah ini.

Tampilan Responsive View Dihidupkan

Untuk menggunakan difitur seperti gambar diatas bisa menggunakan kombinasi CTRL+Shift+M pada firefox.

Bila dilihat tampilan diatas itu harus memiliki lebar yang memenuhi gambar agar terlihat manusiawi.

Keempat, agar tampilan menjadi responsive akan digunakan breakpoint yang sesuai. Tetapi berapa banyak ukuran layar yang akan ditest tentu akan sangat banyak, maka dari itu dibuatlah 4 Breakpoint berdasar ukuran yang populer yakni untuk tampilan yang Small, Medium, Large, dan Extra Large. Sekilas sudah seperti ukuran pada baju saja ya, hehehehe.

Untuk breakpointnya bisa ditambahkan pada tags <style></style>, tapi harus ditempat yang paling bawah pada tags tersebut, yakni diatas </style>

    @media (max-width: 576px) { /* small*/
            #main, #sidebar {
                width: 100%;
            }
        }
    @media (max-width: 768px) { /* Medium*/
            #main, #sidebar {
                width: 100%;
            }
        }
    @media (max-width: 992px) { /* Large*/
        }
    @media (max-width: ≥1200px) { /* Extra Large*/
        }

Sehingga keseluruhan kode tersebut menjadi seperti dibawah ini.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8"/>
    <title>Belajar Responsive</title>
    <style>
        body,html {
            background: #fff;
            color: #222;
            margin: 0; /* Menghilangkan margin pada tags <body> */
            padding: 0; /* Menghilangkan padding pada tags <body> */
            text-align: justify; /* Membuat paragraf menjadi rata kanan-kiri */
            line-height: 1.5; /* Mengubah line-height (Spasi antar baris) */
        }
        #main {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 60%; /* Menetapkan ukuran lebar tags saat mengambang */
            background: #3170d9; /* Agar background menjadi biru */
            color: #fff; /* Mengubah warna fonts */
        }
        #sidebar {
            box-sizing: border-box; /* Agar ukuran width tetap 60% tidak lebih */
            padding: 1em; /* Memberi padding */
            float: left; /* Membuat tags menjadi mengambang kekiri */
            width: 40%;  /* Menetapkan ukuran lebar tags saat mengambang */
            background: #d99c31; /* Agar background menjadi orange */
            color: #fff; /* Mengubah warna fonts */
        }
        .clearfix { /* Digunakan untuk membersihkan area yang tidak mengambang */
            display: table;
            clear: both;
            content: "";
        }
        @media (max-width: 576px) { /* small*/
            #main, #sidebar {
                width: 100%;
            }
        }
        @media (max-width: 768px) { /* Medium*/
            #main, #sidebar {
                width: 100%;
            }
        }
        @media (max-width: 992px) { /* Large*/
        }
        @media (max-width: ≥1200px) { /* Extra Large*/
        }
    </style>
    </head>
    <body>
    <div id="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat delectus nihil, tenetur accusamus temporibus sunt vero inventore voluptas rerum ullam maiores a consequatur illo, accusantium animi soluta, sit fuga exercitationem asperiores cupiditate autem ipsum! Assumenda sed amet vero ratione nisi asperiores magnam possimus ut quibusdam cum quae, eius! Repudiandae, voluptatibus aliquid aperiam natus rerum sit, nisi id, obcaecati mollitia vel sequi beatae quos eaque. Rem illum adipisci, atque in sed iure cumque ut nulla, est fugiat ab beatae pariatur, quam qui fuga! Deleniti, voluptatum placeat nihil blanditiis sequi cum consequuntur ducimus fugiat ut minima, sit sapiente quidem autem odio ullam saepe itaque. Laborum mollitia sint, at molestias, non excepturi delectus velit harum provident nostrum nesciunt vel nam quisquam fuga a maiores repudiandae quo suscipit cupiditate voluptatum quas nemo. Ex quae accusantium illum, tenetur doloribus consequatur maxime cumque culpa quam velit quos sint cum provident sapiente, quo. Distinctio quam numquam saepe sed praesentium optio in? Laboriosam sequi ex excepturi, ad odit numquam consequuntur nisi id nam distinctio cumque ut ab pariatur ea est ratione optio temporibus, tempora cum! Fugiat quo pariatur, consequatur quas provident quaerat nesciunt, ipsum facilis architecto quam mollitia omnis eum a numquam voluptatum facere iusto impedit consequuntur eveniet?</div>
    <div id="sidebar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facilis eos cumque harum possimus sequi, placeat asperiores, dolor hic illo ad, ratione recusandae fugiat error praesentium perspiciatis consequatur explicabo. Tempora similique esse tempore tenetur qui at. Ex quos numquam voluptas maxime! Delectus assumenda, explicabo enim iure fugiat voluptas facilis, deserunt libero rerum eveniet deleniti vel repellendus eos voluptatibus labore saepe quaerat aspernatur voluptate similique suscipit quae placeat. Hic voluptas qui minus quas. Voluptatem amet quae corporis eius odit, possimus autem architecto excepturi obcaecati ipsum. Voluptates culpa quia harum fuga dolor laborum perspiciatis qui quasi officiis consequuntur! Perspiciatis nesciunt molestias dignissimos animi maiores necessitatibus accusamus fugit sint corporis omnis, repudiandae facere dicta, fuga aliquam quisquam facilis dolor asperiores natus ducimus illum reiciendis sequi</div>
    <div class="clearfix">&nbsp;</div>
    </body>
</html>

Sekian artikel yang dapat saya sampaikan ini, apabila ada yang merasa kebingungan bisa bertanya dikolom komentar ya. Salam Coders.

Apa itu Responsive Web Design dan Seberapa Penting ?

Responsive Web Design

Setelah kemarin admin mempost artikel yang berjudul Alasan Programmer Harus Pakai Linux dan diartikel ini admin akan membahasa tentang Apa itu Responsive Web Design Dan Seberapa Penting ? .

Responsive Web Design atau yang biasa disingkat menjadi RWD adalah suatu cara agar tampilan Situs Web tidak rusak atau tetap bagus disetiap tampilan.

Dahulu sebelum adanya teknik Responsive Web Design sang Programmer harus mendeteksi apakah visitor mereka menggunakan Desktop (PC) ataupun Mobile (Handphone). Cara ini tentu tidak efektif apabila diterapkan, karena Programmer harus membuat banyak CSS/HTML untuk setiap device, belum lagi harus meng-upgrade cara pendeteksian visitor mereka tentu kita tidak ingin disuguhkan dengan tampilan desktop yang hadir dihandphone maupun sebaliknya. Namun cara ini juga masih digunakan oleh banyak situs terkenal seperti Google, Facebook, dan Twitter.

Kelebihan Responsive Web Design

  1. Dengan adanya Responsive Web Design berarti hanya akan ada satu website yang bisa diakses oleh berbagai perangkat dengan ukuran yang berbeda-beda.

  2. Mudah dimaintenance, karena hanya memiliki satu website.

  3. Hemat Biaya.

Kekurangan Responsive Web Design

  1. Umumnya memiliki waktu loading yang lebih lama, karena harus me-loading semua gambar dan skrip yang ada.

  2. Mengganggu penempatan banner iklan, posisi banner iklan jelas akan terpengaruh dengan sifat responsive web yang menyesuaikan layoutnya berdasarkan ukuran layar devicenya. Seperti kita tahu banyak blog, news web yang mengandalkan pendapatan dari iklan.

  3. Pengembangan responsive website membutuhkan biaya lebih tinggi karena kompleksitas yang ada pada responsive website.

Teknik dalam pembuatan Responsive Web Design

  1. Breakpoint

    Breakpoint adalah adalah agar layout dapat berubah pada titik-titik yang telah ditentukan, sebagai contoh memiliki 2 Kolom pada desktop maupun table, tapi hanya memiliki 1 kolom pada smartphone. Breakpoint pada umumnya akan bisa disetting maupun disetting dari CSS.

  2. Minimum Value Dan Maximum Value

    Terkadang itu ada baiknya ketika konten mengambil seluruh lebar layar, seperti pada perangkat mobile, tetapi memiliki konten yang sama yang membentang ke seluruh lebar layar TV anda adalah hal yang terkadang kurang masuk akal. Inilah sebabnya mengapa nilai minimum (min) dan maksimum (max) sangat membantu. Sebagai contoh kita memiliki lebar 100% dan lebar maksimum dari 1000px berarti konten yang akan memenuhi layar, tapi jangan melebihi 1000px.

  3. Nested Object

    Merupakan membungkus banyak elemen sebuah wadah penyimpanan yang akan membuat nya lebih mudah dimengerti, lebih bersih dan rapih. Disinilah unit statis seperti piksel(px) dapat membantu. Mereka sangat berguna untuk konten yang tidak ingin anda ubah ukuran nya seperti logo dan tombol.

  4. Mobile First atau Desktop First
    Secara teknis tidak ada banyak perbedaan jika proyek dimulai dari layar yang lebih kecil ke besar (mobile first) atau sebalik nya (desktop first). Namun itu akan menambahkan keterbatasan ekstra dan membantu Anda membuat keputusan jika Anda mulai dengan mobile first. Seringkali orang mulai dari keduanya sekaligus. Silahkan pilih yang sesuai dengan yang anda pahami dengan baik.

Seberapa Pentingkah Responsive Web Design ?

Menurut data, lebih dari 20% dari pencarian google, saat ini telah diakses melalui ponsel, pada tahun 2012 yang lalu, lebih dari setengah local search, juga dilakukan melalui ponsel, bahkan 25% pengguna internet amerika adalah pengguna ponsel. 25% dari seluruh email, dibuka melalui ponsel pintar (smartphone).

Berhubungan dengan marketing dan dunia online, faktanya adalah bot google, lebih memilih website yang responsive untuk dimasukan kedalam index pencarian, dari pada website dengan alamat (mobile dan desktop), contohnya Ketika sebuah bisnis memiliki kedua situs yaitu mobile dan dekstop, maka akan ada URL yang berbeda (seakan duplikasi) dan HTML yang berbeda pula untuk masing-masing, dan hal ini akan memaksa google untuk menjelajahi dan mengindeks beberapa versi situs yang sama persis.

Dari data diatas, penulis akan mengatakan bahwa Responsive Web Design akan sangat penting didalam dunia Web Designer. Karena banyak pengguna internet didunia ini menggunakan Mobile (Smartphone)

Nantikan juga artikel lainnya dari SangCoders . Salam Coders.