Banyak orang bertanya-tanya tentang apa itu HTML. Kalau Anda juga ingin tahu lebih banyak tentang HTML, Anda berada di tempat yang paling tepat.

Disini, Anda akan mempelajari bukan hanya pengertian dari HTML, tetapi juga bagaimana cara kerjanya dan berbagai hal lain mengenai HTML.

Sudah siap untuk mempelajari HTML lebih dalam? Mari kita mulai sekarang.

Apa itu HTML?

HTML sendiri merupakan sebuah singkatan dari HyperText Markup Language.

HTML merupakan salah satu bahasa markup/markah yang ada di dunia pemrograman web development.

HTML ini diciptakan untuk membantu Anda dalam membangun sebuah situs web. HTML memungkinkan kita untuk membuat dan menyusun sebuah paragraf, judul, tautan, gambar, audio, video, serta komponen lain untuk website.

HTML dapat dipelajari dengan mudah karena pengetahuan dasar tentang HTML yang sangat amat banyak di Internet, sehingga Anda akan sangat mudah untuk mempelajarinya.

Setiap tahunnya HTML mengalami revisi serta evolusi secara terus-menerus agar dapat memenuhi persyaratan serta permintaan para pengguna jaringan internet yang juga terus berkembang.

Terdapat sebuah organisasi bernama W3C yang mengemban tugas khusus untuk merancang serta memelihara bahasa markup/markah tersebut. Pendiri W3C adalah Tim Berners-Lee

Hypertext

HyperText adalah sebuah metode yang dapat Anda gunakan untuk berpindah-pindah ketika berada di situs web. Hal itu dilakukan dengan cara mengklik sebuah hyperlink.

Ini adalah contoh Hyperlink --> klik disini

Hyperlink merupakan sebuah teks khusus yang berisi sebuah tautan, sehingga Anda akan dibawa ke halaman sesuai dengan tautan yang dituju. Hyper berarti bahwa teks dalam website tersebut tidak bersifat linear. Ini berarti Anda bisa pergi kemanapun di Internet dengan mengklik.

Markup Language

Markup Language/ Bahasa Markah adalah sebuah cara untuk memberikan anotasi pada sebuah dokumen. Dengan adanya sebuah Markup, kita dapat menentukan bagaimana sesuatu harus ditampilkan atau menentukan arti dan tujuan dari sebuah kalimat atau kata.

Oleh karenanya kita dapat menentukan arti pada sebuah dokumen, misalnya kita dapat menentukan mana kalimat atau kata yang harus ditandai dengan huruf tebal, miring, berwarna dan lain sebagainya.

Beberapa contoh bahasa markup selain HTML:

• HTML – Hypertext Markup Language
• Markdown
• KML – Keyhole Markup Language
• MathML – Mathematical Markup Language
• SGML – Standard Generalized Markup Language
• XHTML – eXtensible Hypertext Markup Language
• XML – eXtensible Markup Language

Bagaimana Cara Kerja HTML?

Jadi, Anda telah memahami apa itu HTML. Tapi, tahukah Anda bagaimana HTML bekerja? Berikut cara kerja HTML.

• HTML terdiri dari sebuah rangkaian kode pendek. Kode-kode pendek tersebut kemudian diketik ke dalam sebuah file teks. Teks yang telah diketik selanjutnya disimpan dengan ekstensi .html sehingga disebut sebagai file HTML.
• Teks tersebut dapat dilihat melalui berbagai browser seperti Chrome, Edge, dll, Browser-browser tersebut membaca file yang tersimpan kemudian menerjemahkan teksnya dalam bentuk yang bisa Anda lihat sesuai dengan keinginan pembuat website.

Mudah bukan? Jika Anda ingin menulis HTML Anda sendiri, Anda perlu menggunakan tag HTML dengan benar dalam menciptakan tampilan yang tepat. Untuk menulis file HTML, Anda dapat menggunakan segala jenis teks editor yang ada dari yang bersifat gratis hingga berbayar.

Fungsi Tags Dalam HTML

Apa sih peranan tags dalam HTML? Pertanyaan ini seringkali dilontarkan oleh mereka yang terutama masih baru memulai pemrograman website.

Tags berfungsi untuk memisahkan teks normal dari kode atau sintaks HTML. HTML menggunakan tag untuk sintaksnya. Tag dibuat dengan karakter khusus: <,> dan /.

Setiap TAG HTML selalu diawali dengan <namaTag>, dan diakhiri dengan </namaTag>

Dengan adanya tags html, sangat memungkin untuk menampilkan hal-hal yang menarik seperti menampilkan tabel dan gambar, video, audio serta hal lain.

Setiap tags memiliki tujuan dan maksud yang berbeda. Tags yang berbeda akan menjalankan fungsi yang berbeda pula.

Ketika Anda melihat sebuah halaman website melalui browser, tags html tidak akan ditampilkan oleh Browser, namun yang Browser tampilkan adalah hasil kompilasi tags HTML, contohnya seperti ini

<b>Kalimat ini akan menjadi tebal</b>, dan yang ini tidak.

Potongan sintaks html diatas akan menjadi seperti ini

Kalimat ini akan menjadi tebal, dan yang ini tidak

Dengan menambahkan <b> di awal dan akhir dari teks, Anda akan mendapatkan teks yang menjadi tebal ketika dilihat melalui browser yang biasa. Contoh tags yang lain adalah:

• <head> yang menyatakan bagian kepala pada dokumen HTML
• <body> menandakan isi dari sebuah dokumen HTML
• <title> merupakan tanda judul HTML yang nantinya akan ditampilkan tepat pada bagian judul di jendela browser
• <br> tag yang menandakan pergantian baris
• <p> digunakan untuk membuat paragraf baru
• <h1> adalah header web tag yang digunakan untuk judul situs web
• <h2> atau header 2 merupakan tag untuk membuat subjudul dalam situs web
• <i> merupakan italic tag yang fungsinya adalah membuat teks yang tercetak miring dihalaman browser.

Dan masih banyak lagi tag dalam HTML yang fungsinya bermacam-macam dan bisa digunakan untuk menciptakan tampilan situs web yang menarik.

Waktu Yang Dibutuhkan Untuk Membuat HTML

Mempelajari HTML tidak memerlukan waktu lama. Untuk bisa mengetahui HTML, Anda hanya perlu meluangkan beberapa hari agar bisa berkonsentrasi membaca serta mempelajari kode HTML yang cocok dengan keinginan Anda. Untuk mempelajari dasar-dasar HTML saja, waktu yang diperlukan hanya sekitar satu jam. Segera setelah Anda mengetahui tags, Anda bisa mulai membuat halaman HTML.

Lain halnya jika Anda ingin menggunakan HTML yang telah Anda buat serta merancang sebuah situs web yang menarik. Untuk membuat sebuah desain situs web yang menarik, diperlukan bakat serta keahlian serta beberapa hal penting lain seperti:

• Mempelajari teknik serta penggunaan tag yang benar guna meningkatkan pekerjaan membuat situs web.
• Memiliki pemahaman yang baik mengenai desain dan mengenai target pembaca yang ingin Anda jangkau agar bisa meningkatkan peluang kesuksesan situs web Anda.
• Memperoleh keterampilan dalam bidang desain grafis, tipografi, serta pemrograman komputer sehingga Anda bisa menjalankan situs web yang mengesankan dan menarik.
• Mempelajari Teknik promosi juga diperlukan agar bisa beradaptasi dalam membuat tulisan yang ditujukan pada audiens yang dituju.

Dengan memperoleh bekal seperti dalam daftar di atas, Anda akan siap untuk bekerja dengan komputer secara efisien. Untuk membuat file HTML kita tidak perlu untuk online sepanjang waktu. Anda tentu bisa mengkodekan situs web Anda seluruhnya secara offline, untuk kemudian disimpan di komputer yang Anda miliki. Selanjutnya, Anda bisa mentransfer seluruh file tersebut ke penyedia layanan hosting.

Perkembangan Terbaru HTML

Di masa lalu, kemampuan HTML dapat dikatakan terbatas karena ada beberapa hal yang tidak bisa dilakukan oleh HTML.

Tapi seiring dengan berkembang pesatnya tren pembuatan situs web, bahasa pendukung lain telah diciptakan sehingga hal-hal baru bisa diwujudkan. Selain itu, HTML sendiri dimodifikasi setiap beberapa tahun sekali untuk memberi jalan bagi kemajuan HTML.

Sebagai contoh dengan adanya Cascading Style Sheets (CSS) yang dapat Anda gunakan untuk membuat file HTML lebih menarik.

Ada pula JavaScript yang menyediakan interaksi dan efek khusus dasar serta menambahkan sebuah kekuatan lain ke HTML.

https://www.google.com/search?q=apa+itu+html&oq=apa+itu+html

Setelah memahami semua dasar-dasar HTML, langkah apa yang akan Anda ambil selanjutnya? Masih ada beberapa hal lain yang perlu dipelajari dengan matang sebelum Anda memutuskan untuk membuat sebuah situs web.

Jika Anda yakin sudah siap membangun situs web Anda sendiri, gunakan semua keterampilan yang telah Anda pelajari dengan baik dari halaman-halaman ini. Selamat mencoba, dan terus kunjungi Kopidev ya.

Saat instalalasi WSL 2 kadang terjadi error, error yang muncul biasanya seperti ini:

C:\>ubuntu
Installing, this may take a few minutes...
Installation Failed!
Error: 0x8007019e
Press any key to continue...

Windows Subsystem For Linux

Untuk mengatasi ini caranya sangat mudah, Anda hanya perlu memastikan opsi "Windows Subsystem For Linux" sudah dicentang

Apabila sudah dicentang, silahkan lakukan restart.

Reset Linux Distribution pada WSL 2

Setelah selesai melakukan restart, pastikan untuk melakukan reset linux distribution pada windows 10, caranya pada menu start kita cari linux distribution yang ingin kita gunakan, setelah itu klik kanan, dan klik setting.

Pada menu setting, kalian tekan tombol reset.

Virus corona menyebabkan pelajar, mahasiswa, dan professional untuk belajar & belajar jarak jauh dari rumah demi mencegah penyebaran virus corona. 

Bekerja & belajar dari rumah punya banyak keuntungan, salah satunya adalah waktu luang, yang mungkin sulit didapat dibanding sebelumnya. 

Waktu luang akan lebih bermanfaat jika digunakan untuk mempelajari suatu hal baru untuk menambah skill personal. Salah satunya dapat dilakukan dengan mengakses situs belajar pemrograman online.

Belajar pemrograman secara online ada yang berbayar dan gratis. Untuk yang gratis dapat mengakses youtube atau situs lainnya. 

Saat ini kampus Ivy League, seperti Harvard University, memberikan pembelajaran secara gratis yang dapat diakses kapanpun, total materi yang diberikan sebanyak 71materi. Materi tersebut ada yang masuk kategori pemrograman dan tidak

Kategori Materi Belajar Online Harvard:

1. Computer Science
2. Data Science
3. Programming
4. Art & Design
5. Science
6. Programming
7. Engineering
8. Mathematics
9. Education & Teaching
10. Personal Development

Materi Belajar Pemrograman Online

Karena materi yang ditawarkan cukup banyak, dan semuanya bagus. Berikut coba saya tampilkan materi yang dapat meningkatkan skill pemrograman kalian

Pengenalan Game Development

Pada materi ini kita akan mempelajari pengelanan game development interaktif 2D dan 3D. Materi yang dipelajari meliputi

• Prinsip dasar 2D, 3D, animasi, suara, dan collision
• Unity
• Lua, C#
• Dasar mendesain game, dan pembuatan game

Akses Materi: https://www.edx.org/course/cs50s-introduction-to-game-development

Membangun Aplikasi Mobile Dengan React Native

Disini kita akan diajarkan untuk membuat sebuah aplikasi mobile menggunakan react-native. Sebuah framework yang sangat populer yang dikembangkan oleh facebook. Dengan react native, kita dapat membuat aplikasi cross-platform menggunakan JavaScript. Materi yang diajarkan meliputi:

• JavaScript
• ES6
• React, JSX
• Components, Props, State, Style
• Components, Views, User Input
• Debugging

Akses Materi: https://www.edx.org/course/cs50s-mobile-app-development-with-react-native

Pemrograman Web Menggunakan Python dan JavaScript

Pada materi ini kita akan diajarkan mendesain sebuah database, scalability, security, dan user experience. Dan juga kita akan belajar untuk membuat dan menggunakan API. Materi yang akan diajarkan antara lain:

• Git
• HTML, CSS
• Flask
• SQL
• APIs
• JavaScript

Akses Materi: https://www.edx.org/course/cs50s-web-programming-with-python-and-javascript

Pengenalan Computer Science

Pada materi ini kita akan diajarkan dasar computer science, seperti algoritma, memecahkan permasalahan programming dengan cara yang efisien, struktur data, dan lain sebagainya.

Akses Materi: https://www.edx.org/course/cs50s-introduction-to-computer-science

Pengenalan AI menggunakan Python

AI atau Artificial Intelligence telah mengubah cara manusia untuk hidup, bekerja dan bermain. Dengan adanya AI saat ini, sekarang sudah ada mobil yang dapat menyetir sendiri, search engine yang pintar, hardware asisten, dan lain sebagainya.

Pada materi ini kita akan diajarkan konsep dasar tentang Kecerdasan Buatan menggunakan Python dengan cara mengeksplorasi konsep dan algoritma dasar yang ada pada kecerdasan buatan modern.

Akses Materi: https://www.edx.org/course/cs50s-introduction-to-artificial-intelligence-with-python

Logitech, siapa yang tak kenal merek ini. Merek ini sudah terkenal sejak saya menggunakan PC pertama saya di sekitar tahun 90' an. Merek ini terkenal akan kehandalan nya dalam memproduksi perangkat pendukung PC seperti mouse, keyboard, Web Cam, dan lain sebagainya.

Bahkan mereka juga mempunyai penamaan khusus untuk perangkat gaming yaitu G Series. Dimana mereka juga memproduksi perangkat seperti game pad, driving gear, audio, dan lain sebagainya.

Intinya merek Logitech ini sudah lama terkenal untuk memproduksi perangkat mainstream untuk Personal Computer baik untuk kebutuhan office maupun gaming.

Produk Logitech yang akan kita bahas saat ini adalah keyboard mechanical gaming terbaru mereka yaitu Logitech G Pro X Keyboard.

Produk ini memakai format TKL atau Ten KeyLess. Jadi anda tidak akan menemukan numpad pada seri ini, keyboard ini sangat cocok digunakan untuk kebutuhan gaming maupun untuk kebutuhan di kantor.

Produk ini dirilis sekitar setengah tahun yang lalu. Versi ini adalah versi refresh dari G Pro Keyboard mereka. Dimana mereka mengganti versi switch romer G mereka dengan model baru yaitu GX Series, yang lebih umum digunakan dan mirip dengan stem pada Cherry series.

Fitur Keyboard Logitech G Pro X:

RGB lighting

RGB lighting dengan software G Hub. Bisa diatur lighting per key, dengan banyak pilihan animasi. ini merupakan salah satu Software bawaan yang paling baik saat ini. Dapat menggabungkan beberapa perangkat Logitech G series lain nya dalam 1 software.

Detachable Cable

Detachable kabel yang bisa dilepas. Walaupun masih menggunakan port micro usb tetapi sudah merupakan nilai plus. dengan pin micro usb diapit 2 penyangga di kanan kiri nya.

Hotswap Switches

Hotswappable mechanical switch. Jadi switch di keyboard ini bisa dicopot pasang dan diganti dengan tipe lain. yang saya lihat aneh nya pada keyboard bawaan nya menggunakan blue switch, dimana bagi kebanyakan orang tidak menyukai tipe switch tersebut untuk bermain game.

Macro Function

12 fungsi makro yang bisa diset dengan software G Hub, jelas sangat membantu dalam game-game tertentu.

GX Switches

Salah satu kelebihan lainnya adalah Keyboard Logitech G Pro X menggunakan GX Swithced, yang mana switch ini compatible dengan segala keycaps di Cherry MX

Kelebihan Keyboard Logitech G Pro X

Gaming Design

Design gaming yang menurut pendapat saya ok banget. Dari tampak samping yang tipis sampai bentuk font pada keycaps yang menarik. Bentuk nya futuristik dan rapi.

Dedicated Gaming

Adanya dedicate gaming dan lightning button yang secara default bisa mematikan tombol windows dan RGB LED. Yang bisa disetting di dalam G Hub untuk mematikan tombol lain nya yang tidak digunakan dalam bermain game.

Kekurangan Keyboard Logitech G Pro X

1. Masih menggunakan micro usb yang mana saat ini sudah banyak produsen keyboard yang sudah beralih ke USB Type C.
2. Tidak ada nya fitur wireless. Sebenarnya ini fitur yang ditunggu para logitech fans saat logitech berniat untuk merefresh lini produk gaming ini, sayang nya hal ini belum terwujud.
3. Masih menggunakan ABS keycaps. Yang mana akan meninggalkan bekas jejak pada keycaps jika kita tidak pandai merawatnya.
4. Bottom row keycaps yang tidak standard, dimana spacebar menggunakan ukuran yang tdk sama dengan keyboard pada umum nya.
5. Stab pada keyboard ini agak goyang meskipun pada kondisi baru, terutama pada space bar.
6. Harga switch bawaan nya agak mahal sekitar 600 – 800 rb per box isi 92 switch.

Kesimpulannya Keyboard G Pro X

Keyboard ini adalah produk yang menarik, sayang sekali logitech melewatkan beberapa hal penting yang simple yang menurut saya.

Dengan harga nya, Keycaps PBT dan USB Type C menurut saya simple (sangat mungkin) dilakukan oleh perusahaan sebesar Logitech.

Apalagi merubah bottom row menjadi lebih universal, sehingga memudahkan user untuk mengganti keycaps bawaan nya.

Ketiga hal ini menurut saya yang menjadikan produk ini kurang diminati oleh pencinta keyboard.

Tetapi bagi Logitech fans dijamin tidak akan melewatkan produk ini, karena menurut saya ini adalah keyboard gaming paling bagus yang pernah dikeluarkan oleh Logitech sampai saat ini, walaupun dengan beberapa kekurangan.

Video Dari Youtube

Tulisan ini diambil Handi Suparta, dengan izin publikasi dari yang bersangkutan.

Kepada seluruh pengguna Widget COVID-19 disarankan agar melakukan update, dengan cara mengubah URL pada script Widget yang di sediakan. Tutorial update ada dibawah. Terima Kasih

admin

Beberapa bulan lalu dunia dihebohkan oleh sebuah virus yang berasal dari Wuhan, China. Virus ini disebut dengan Corona Virus dengan codename COVID-19.

Seiring berkembangnya waktu, virus tersebut telah menyebar keseluruh penjuru dunia, termasuk di Indonesia.

Masyarakat indonesia saling kerja sama untuk menekan pertumbuhan virus ini, dimulai dari diri sendiri tentunya, seperti seperti mengurangi kegiatan diluar, hingga menjaga kebersihkan diri setiap hari.

Sebagai seseorang yang bergelut di dalam dunia teknologi, kita mungkin ada keinginan untuk membantu masyarakat luas, seperti yang telah dilakukan oleh para dokter dan relawan yang ada di luar sana.

Jika kita seorang software engineer, dapat mencoba untuk bergabung ke https://kawalcorona.com/ untuk membangun platform mereka.

Jika kita seorang tech enthusiast yang kurang memiliki keahlian pemrograman, namun memiliki website atau blog, setidaknya kita dapat berkontribusi kepada masyarakat dengan memberikan informasi yang akurat dan tepat.

Dari background diatas, saya mencoba membuat sebuah widget yang dapat dipasang di website pribadi masing-masing. Widget yang saya buat dapat memberikan statistik COVID-19 yang ada di Indonesia saat ini.

Widget yang dibangun menggunakan API yang dimiliki oleh https://kawalcorona.com/ , saya sangat berterimakasih dengan adanya API ini.

Cara Pasang Widget Kawal Corona

Cara pemasangannya cukup simple, saya coba menjelaskan cara pemasangan di wordpress dan blogspot.

Pasang widget kawal corona di WordPress

Untuk website yang dibangun dengan wordpress, kita dapat masuk ke halaman Tampilan, lalu masuk ke menu Widget.

Setelah itu, kita tambahkan widget HTML Khusus kedalam sidebar. Lalu pada kolom isi di widget HTML Khusus kita tambahkan script dibawah ini

<div id="kopi-covid"></div>
<script>
  var f = document.createElement("iframe");
  f.src = "https://kopi.dev/widget-covid-19/";
  f.width = "100%";
  f.height = 380;
  f.scrolling = "no";
  f.frameBorder = 0;
  var rootEl = document.getElementById("kopi-covid");
  console.log(rootEl);
  rootEl.appendChild(f);
</script>

Seperti dibawah ini

Pasang widget kawal corona di Blogger / Blogspot

Untuk memasang widget kawal corona di Blogger/Blogspot kalian dapat masuk ke halaman Tata Letak, lalu klik tombol "Tambahkan Widget". Saat muncul popup, kalian pilih menu HTML/JavaScript ini:

<div id="kopi-covid"></div>
<script>
  var f = document.createElement("iframe");
  f.src = "https://kopi.dev/widget-covid-19/";
  f.width = "100%";
  f.height = 380;
  f.scrolling = "no";
  f.frameBorder = 0;
  var rootEl = document.getElementById("kopi-covid");
  console.log(rootEl);
  rootEl.appendChild(f);
</script>

Lalu tambahkan script diatas tadi kedalam kolom Konten, seperti ini:

Pasang widget kawal corona di Laravel

Untuk pemasangan widget pada Laravel, cukup mudah sekali, kita tinggal buka blade template yang kita miliki, lalu kita sematkan script html diatas ke lokasi yang kita inginkan

Mengatur ketinggian & warna widget kawal corona

Untuk mengatur ketinggian widget kawal corona, kalian dapat mengubah nilai ketinggian pada baris f.height = 380; , dan untuk menggunakan widget kawal corona berwarna gelap, kalian dapat mengubah url pada baris f.src = "https://kopi.dev/widget-covid-19/"; menjadi f.src = "https://kopi.dev/widget-covid-19/?dark=true";

Mode terang widget kawal corona

Mode gelap widget kawal corona

Pada artikel ini kita akan belajar membuat aplikasi android sederhana, aplikasi android sederhana ini dibuat untuk melakukan pencarian produk halal MUI. Pada tutorial ini saya menggunakan Android Studio versi 3.2.2.

Menyiapkan Project Baru di Android Studio

1. Buat projek baru di Android Studio, klik Start a new Android Studio project.
2. Pilih Empty Activity, kemudian atur nama project, package name dan direktori (folder lokasi) penyimpanan sesuai keinginan kalian.
3. Untuk bahasa gunakan Java dan minimum API level pilih API 21.
4. Tekan Chekbox (Ceklis) pada Use AndroidX artifacts, lalu klik Finish dan tunggu hingga pembuatan projek selesai.
5. Kemudian tambahkan repository jitpack.io di build.gradle (project)

   allprojects {
       repositories {
           . . .
           maven { url 'https://jitpack.io' }
           . . .
       }
   }
   

6. Kemudian buka build.gradle ( di dalam app directory) lalu tambahkan library berikut:

   dependencies {
       . . .
       implementation 'com.google.android.material:material:1.0.0'
       implementation 'androidx.recyclerview:recyclerview:1.1.0'
       implementation 'com.github.JabirDev:HalalMUIAndroid:1.0'
       . . .
   }
   

Membuat Layout Aplikasi Produk Halal di Android Studio

Buat layout baru caranya klik kanan pada direktori layout pilih new lalu pilih Layout resource file beri nama dengan item_list.

Tutorial Android - Pencarian Produk Halal MUI

Lalu, paste kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:orientation="vertical"
    android:paddingStart="16dp"
    android:paddingTop="16dp"
    android:paddingEnd="16dp">

    <TextView
        android:id="@+id/tv_produk"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6" />

    <TextView
        android:id="@+id/tv_produsen"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle2" />

    <TextView
        android:id="@+id/tv_sertifikat"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body2" />

    <TextView
        android:id="@+id/tv_berlaku"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body2" />

    <View
        android:id="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_marginTop="16dp"
        android:background="?android:attr/listDivider" />
</LinearLayout>

Menambahkan ListAdapter

Selanjutnya buat file java baru untuk adapter RecyclerView, beri nama ListAdapter.

Selanjutnya, paste kode berikut ini:

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class ListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private Context context;
    private List<HalalData> items;

    public ListAdapter(Context context, List<HalalData> items) {
        this.context = context;
        this.items = items;
    }

    class ListHolder extends RecyclerView.ViewHolder {

        TextView produk, produsen, sertifikat, berlaku;

        public ListHolder(@NonNull View itemView) {
            super(itemView);
            produk = itemView.findViewById(R.id.tv_produk);
            produsen = itemView.findViewById(R.id.tv_produsen);
            sertifikat = itemView.findViewById(R.id.tv_sertifikat);
            berlaku = itemView.findViewById(R.id.tv_berlaku);
        }

        public void setData(HalalData data) {
            produk.setText(data.getNamaProduk());
            produsen.setText(data.getNamaProdusen());
            sertifikat.setText(data.getNomorSertifikat());
            berlaku.setText(data.getTanggalValid());
        }
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(context);
        View view = inflater.inflate(R.layout.item_list, parent, false);
        return new ListHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        ListHolder h = (ListHolder) holder;
        h.setData(items.get(position));
    }

    @Override
    public int getItemCount() {
        return items.size();
    }
}

Sekarang buka MainActivity.xml. Di sini saya menggunakan:

1. EditText untuk menginputkan teks.
2. Radio Button di dalam Radio Group untuk memilih kategori.
3. RecyclerView untuk menampilkan daftar produk.

Berikut kode layoutnya kalian bisa desain sesuai keinginan atau copy paste aja:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/input_query"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Cari produk"
        android:inputType="textPersonName" />

    <RadioGroup
        android:id="@+id/rg_kategori"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_produk"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Produk" />

        <RadioButton
            android:id="@+id/rb_produsen"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Produsen" />

        <RadioButton
            android:id="@+id/rb_sertifikat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Nomor Sertifikat" />
    </RadioGroup>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Lanjut buka file MainActivity.java. Kemudian paste kode berikut:

import android.os.Bundle;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.util.Log;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";
    private String kategori;
    private List<HalalData> items = new ArrayList<>();
    private ListAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        adapter = new ListAdapter(this, items);
        RecyclerView rv = findViewById(R.id.recyclerview);
        rv.setAdapter(adapter);
        rv.setLayoutManager(new LinearLayoutManager(this));

        EditText inputQuery = findViewById(R.id.input_query);
        RadioGroup rgKategori = findViewById(R.id.rg_kategori);
        final RadioButton produk = findViewById(R.id.rb_produk);
        final RadioButton produsen = findViewById(R.id.rb_produsen);

        rgKategori.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                // Ketika Radio Group dipilih
                if (checkedId == produk.getId()){
                    kategori = "produk";
                } else if (checkedId == produsen.getId()){
                    kategori = "produsen";
                } else {
                    kategori = "sertifikat";
                }
            }
        });

        inputQuery.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                // Ketika user memasukkan teks pada edit text
                String q = s.toString();
                if (TextUtils.isEmpty(q)){
                    // Jika teks kosong maka akan menampilkan toast berikut
                    Toast.makeText(MainActivity.this, "Input text", Toast.LENGTH_SHORT).show();
                } else {
                    // Jika teks tidak kosong maka akan melakukan pencarian sesuai dengan teks yang sudah dimasukkan
                    pencarian(q);
                }
            }
        });

    }

    // Fungsi untuk mencari produk
    private void pencarian(String q) {
        items.clear();
        if (TextUtils.isEmpty(kategori)){
            // Jika kategori tidak dipilih maka akan menampikan toast dengan pesan berikut
            Toast.makeText(MainActivity.this, "Pilih kategori pencarian", Toast.LENGTH_SHORT).show();
        } else if (kategori.equals("produk")){
            // Jika kategori yang dipilih adalah produk
            HalalMui.byNamaProduk(q, new HalalListener() {
                @Override
                public void ketikaSukses(List<HalalData> halalData) {
                    items.addAll(halalData);
                    adapter.notifyDataSetChanged();
                }

                @Override
                public void ketikaTidakAdaData(String s) {
                    Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();
                }

                @Override
                public void ketikaGagal(Throwable t) {
                    Log.e(TAG, "ketikaGagal: ", t);
                    Toast.makeText(MainActivity.this, t.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });
        } else if (kategori.equals("produsen")){
            // Jika kategori yang dipilih adalah produsen
            HalalMui.byNamaProdusen(q, new HalalListener() {
                @Override
                public void ketikaSukses(List<HalalData> halalData) {
                    items.addAll(halalData);
                    adapter.notifyDataSetChanged();
                }

                @Override
                public void ketikaTidakAdaData(String s) {
                    Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();
                }

                @Override
                public void ketikaGagal(Throwable t) {
                    Log.e(TAG, "ketikaGagal: ", t);
                    Toast.makeText(MainActivity.this, t.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });
        } else if (kategori.equals("sertifikat")){
            // Jika kategori yang dipilih adalah sertifikat
            HalalMui.byNomorSertifikat(q, new HalalListener() {
                @Override
                public void ketikaSukses(List<HalalData> halalData) {
                    items.addAll(halalData);
                    adapter.notifyDataSetChanged();
                }

                @Override
                public void ketikaTidakAdaData(String s) {
                    Toast.makeText(MainActivity.this, s, Toast.LENGTH_SHORT).show();
                }

                @Override
                public void ketikaGagal(Throwable t) {
                    Log.e(TAG, "ketikaGagal: ", t);
                    Toast.makeText(MainActivity.this, t.getMessage(), Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
}

Terakhir buka file AndroidManifest.xml lalu tambahkan permission untuk mengakses internet, seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.jabirdeveloper.halalmui">

    <uses-permission android:name="android.permission.INTERNET"/>

</manifest>

Sekarang jalan projek bisa menggunakan device android kalian atau bisa juga menggunakan emulator. Tekan Shift + F10, berikut tampilan Aplikasi Halal MUI yang sudah kita buat.

Tadi pagi ada yang share tentang font baru, sebuah font yang dibuat khusus untuk menulis code, nama fontnya adalah jetbrains mono. Saya langsung baca-baca tentang font ini di landing page nya, dan saya cukup terkesan dengan Jetbrains, karena telah berbaik hati membuat font khusus untuk para penulis code.

Menurut saya pribadi font Jetbrains Mono ini mirip dengan consolas font, mirip tapi tak sama. Perbedaan yang paling dapat dirasakan adalah huruf kecilnya, jebrains menambahkan tinggi font untuk huruf kecilnya, menurut websitenya Jetbrains Mono, dengan memaksimalkan tinggi font dapat meningkatkan reading experience.

Ligatur

Salah satu yang menjadi favorit saya adalah Ligatur (Dalam penulisan dan tipografi, suatu ligatur terjadi ketika dua atau lebih grafem atau huruf digabungkan sebagai satu mesin terbang). Dan si Jetbrains Mono ini menggabungkan dua atau lebih menjadi satu simbol. Contoh saat kita menulis sebuah arrow ( -> ) JetBrains Mono akan mengubahnya menjadi simbol panah

Dan terakhir yang menjadi favorit saya adalah GRATIS, dan instalnya gampang banget. Kalian langsung saja download di situs resminya, dan install. Setelah itu ubah configurasi font pada editor kita, contohnya VSCode, kita buka setting preference (JSON), lalu:

"editor.fontFamily":"'JetBrainsMono', 'monospace', 'Droid Sans Fallback'",

Apa Itu Front End Developer?

Apa itu front end developer

Front End Developer adalah salah satu dari sekian banyak bidang pekerjaan yang ada di dalam dunia pemrograman Website & Mobile. Pada suatu proses pembuatan website atau aplikasi, umumnya terdapat 3 komposisi utama yang sangat penting agar website atau aplikasi dapat dinikmati secara sempurna. 3 komposisi tersebut adalah Front End Developer, Backend Developer, dan Web Designer atau UI/UX Designer.

3 komposisi utama ini harus saling bekerja sama dengan baik agar tercipta sebuah website atau aplikasi yang indah yang dapat memanjakan penggunanya.

Apa tugas seorang Front-end Developer?

Seorang Front End Developer bertugas untuk menerapkan interface dan experience yang telah diberikan oleh seorang desainer Website atau UI/UX Designer. Setelah tugas tersebut selesai, Front End Developer masih memiliki tugas lain (menurut saya ini hanyalah tugas opsi), yaitu menghubungkan atau melakukan intregasi website atau aplikasi yang telah dibuat dengan data yang telah disediakan oleh Backend Developer.

Apa Perbedaan Antara Front End & Back End Developer?

front end vs back end

Front end developer dan Backend developer dapat dibedakan dari lingkup kerja & tugasnya, serta bahasa yang digunakan.

Dari segi bahasa yang digunakan, seorang Front end Developer umumnya menggunakan HTML, CSS, dan JavaScript, sedangkan seorang Backend Developer umumnya menggunakan Golang, PHP, Python, Ruby dan lain sebagainya.

Untuk memahami lebih lanjut tentang perbedaan Front end dan Back end, penulis ingin bertanya kepada pembaca.

Setiap harinya kita pasti membuka sebuah website kan? Seperti facebook, google, twitter, situs berita, dan lain sebagainya. Saya rasa jawabannya adalah "YA PASTI".

Yang kita lihat pada layar, serta interaksi yang kita lakukan pada website tersebut, seperti klik tombol, membuka menu, menggeser sebuah gambar, dan lain sebagainya, hal tersebut merupakan lingkup kerja yang dilakukan oleh seorang Frontend Developer. Sedangkan seorang Backend Developer bekerja dibalik itu semua dengan cara menyajikan data yang dibutuhkan oleh Front end Developer untuk ditampilkan di layar.

Relasi Antara Front end Developer dan Backend Developer

Kita bayangkan ada sebuah website sederhana berisi halaman login. Pada halaman login terdapat 2 teks input, yaitu teks input untuk e-mail dan teks input untuk password.

Front end Developer memiliki kewajiban untuk merekam value e-mail dan password yang diberikan/di inputkan oleh user.

Saat user selesai mengisi inputan e-mail dan password, user menekan tombol "submit", saat ada aksi tekan tombol "submit" Front end Developer bertugas untuk mengirim sebuah request(permintaan) kepada Backend Developer, request yang dikirim oleh Front end berisi e-mail, dan password yang telah direkam sebelumnya.

Backend Developer kemudian menerima data dari request yang dikirim oleh Front end Developer, data yang diterima oleh Backend Developer end berisi e-mail, dan password.

Backend Developer kemudian bertugas untuk mencocokkan data yang diterima dari request tadi ke dalam database.

Pada tahapan ini, ada atau tidak adanya data yang cocok, antara data yang ada di dalam database dengan data yang diterima, Backend developer wajib memberikan informasi (response) tersebut kepada Front end Developer.

Sehingga front end dapat menjelaskan kepada user tentang hasil(response) dari aksi login yang dilakukan oleh user tersebut.

Perbedaan Lingkup Kerja Front end Developer dan Backend Developer

Tahap-tahap untuk menjadi  seorang Front end Developer?

Apabila kita telaah dunia front end development pada 5 tahun terakhir, mungkin kita akan sering mendengar terminologi yang belum pernah kita dengar pada artikel, dan video seperti ES6, jQuery, React, Redux, Webpack, Babel, TDD, JEST, Git, async, OOP, functional-style, npm, Node.js, Yarn, SQL, NoSQL, Graph databases, MongoDB, Angular.

Jika sekitar tahun 2010 kita hanya butuh HTML, CSS, JavaScript atau mungkin jQuery dalam membuat website, pata tahun 2020 sekarang ini sudah sangat amat jauh berbeda, bahkan ada sebagian orang yang menganggap jika jQuery sudah masuk ke zona "outdated" alias zona lawas yang sudah harus ditinggalkan.

Front end development memiliki pertumbuhan yang sangat cepat, sehingga standarisasi seorang Front end developer juga ikut semakin rumit, dan muncul terminologi diatas.

Berdasarkan research dan pengalaman saya di dunia Front end Development, saya membagi hal yang harus dilalui seorang Front end Developer kedalam beberapa tahap, berikut adalah tahapannya:

*Dapat memilih salah-satu dari sekian opsi yang ada, namun baik apabila kita dapat memahami opsi lainnya

Front end Developer Roadmap

Berapa gaji seorang Front-End Developer di Indonesia?

Dengan banyaknya rintangan yang harus dilalui untuk menjadi seorang front end developer yang keren, mungkin muncul sebuah pertanyaan Berapa sih gaji seorang Front end Developer? Emang sesuai dengan yang sudah dilalui?.

Saya mendapatkan data dari beberapa situs seperti techinasia.com, careerexplorer.com, dll. Dan setelah saya rangkum dari beberapa situs tersebut saya mendapat nilai rata-rata.

Di Indonesia gaji seorang front end developer berkisar pada angka:

Kesimpulan

Lebih dari 20 tahapan yang harus dilalui untuk menjadi seorang Front end Developer, itu angka yang cukup banyak, dan butuh waktu yang tidak sedikit.

Saya sangat menyadari jika hal ini dapat membuat seseorang yang ingin mulai belajar akan berjalan mundur perlahan karena sudah takut melihat list yang sebanyak itu.

Oleh karena itu pada series ini kita akan sama-sama belajar untuk menjadi seorang Front end Developer dengan menggunakan sebuah project atau istilahnya real world example, sehingga dapat lebih mudah memahami tentang maksud dan tujuan dari sebuah tahapan yang harus dilalui seorang front end developer.

Terminologi yang banyak disebutkan di atas hanyalah sebuah tools, framework, metode, dan lain sebagainya yang front end developer butuhkan di tahun 2018 kedepan.

Saran saya jangan terlalu dipikirkan, relax saja, dan jangan takut, karena saya yakin semua akan paham jika waktunya sudah tepat.

Oleh karena itu, saya mencoba menulis artikel ini untuk membimbing teman-teman agar menjadi seorang Front end Developer yang ciamik dan hebat.

Jangan lupa untuk selalu buka situs ini, karena series ini akan selalu di perbaharui. Jika ada masukan atau pertanyaan, teman-teman dapat bertanya melalui kolom komentar. Saya akan berusaha menjawab sebaik mungkin.