Membuat Halaman Penjualan Langsung Menggunakan ReactJS

-

Apa itu React JS?

React JS adalah library JavaScript yang biasa digunakan saat membangun UI suatu website atau aplikasi web. Jadi, React JS bisa dianggap seperti perpustakaan yang berisi berbagai kode JavaScript yang sudah tertulis (pre-written). Anda tinggal mengambil kode yang ingin Anda gunakan. Sehingga, ini membuat proses coding menjadi lebih efisien.

Sebentar, apakah Anda belum tau apa itu JavaScript? Jika belum, JavaScript adalah bahasa pemrograman yang dapat membantu Anda membuat konten web yang dinamis, seperti form, slideshow, atau konten interaktif lainnya. 

Dengan JavaScript, Anda dapat membuat tampilan website yang lebih menarik. Nah, inilah mengapa library ini berguna untuk membangun UI, karena pengaplikasian kode JavaScript di website Anda bisa menjadi lebih mudah. 

Oh ya, library ini juga bersifat open source. Artinya, isinya akan terus berkembang karena semua orang bebas memodifikasi kode di dalamnya. Berkat kegunaannya, React JS adalah salah satu library yang sangat populer. Saat ini ada lebih dari satu juta website yang sudah menggunakannya. Bahkan website-website terkenal seperti bbc.com, paypal.com, dan yahoo.com juga menggunakannya.


Apa Kelebihan React JS?

Di atas, kita sudah membahas sebagian fungsi dari library ini, yaitu untuk mempermudah penggunaan JavaScript. Selain itu, ada dua fitur tambahan yang menjadi keunggulannya yaitu JSX dan Virtual DOM. 

Kedua fitur ini yang seringkali disebut jika React JS sedang dibandingkan dengan library JavaScript yang lain – seperti Inferno JS atau Preact. Oleh karena itu, mari kita lihat kedua fitur tersebut secara lebih detail!


JSX 

JSX adalah extension syntax JavaScript yang memungkinkan Anda untuk memodifikasi Document Object Model (DOM) dengan kode bergaya HTML. Untuk mengetahui fungsi JSX dengan lebih jelas, Anda perlu tahu tentang DOM terlebih dahulu.

DOM adalah application programming interface (API) yang berfungsi untuk mengatur struktur halaman web. Nah, untuk menambah konten dinamis ke dalam halaman web, developer mesti memodifikasi DOM.

Dengan kata lain, JSX akan mempermudah Anda untuk menambah konten dinamis. Karena extension ini dapat membantu Anda untuk memasukkan syntax bergaya HTML ke dalam DOM. Akan tetapi, JSX bukanlah HTML. Mungkin bahasa sederhananya seperti ini: JSX terlihat seperti HTML, tapi memiliki fungsi seperti JavaScript.

Selain itu, Anda juga bisa menggunakan JSX di berbagai browser. Karena JSX cocok dengan semua platform browser modern – seperti Chrome atau Firefox.


Virtual DOM

Ketika developer mengupdate DOM dengan menggunakan JSX, React JS akan membuat Virtual DOM, yaitu salinan dari DOM asli yang ingin diupdate. Nah, Virtual DOM berguna untuk melihat bagian dari DOM asli yang berubah. Contohnya, ketika pengguna website mengklik tombol like atau comment, tentu yang perlu berubah hanya bagian like dan comment saja, bukan?

Ketika menemukan bagian yang perlu diubah, React JS akan mengubah bagian itu saja. Jadi, pengguna tidak perlu reload satu halaman untuk melihat perubahannya. Hal ini dapat berpengaruh terhadap performa website. Karena setiap perubahan hanya dilakukan pada bagian yang diperlukan saja.

Tanpa Virtual DOM, website Anda akan menggunakan HTML untuk update DOM.  Sehingga, seluruh DOMnya mesti direload untuk menampilkan perubahan di satu bagian – seperti mengklik tombol like atau menambahkan komentar.


Kode HTML

Pada pembahasan Kali ini Kita akan coba Membuat Tampilan Penjualan Langsung pada ReactJS, juga akan memakai CSS dan JS.

Selanjutnya buat file dengan nama penjualanLangsung.html

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Penjualan Langsung</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="./public/style/style.css">
<script src="./public/script/script.js"></script>
</head>

<body>

<div id="app"></div>

<script type="text/babel">
class Hello extends React.Component {
render() {
return (
<div>
<nav class="navbar navigasi" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="./image/user.png" class="avatar" width="40" height="40" alt=""/>
<h2 class="title is-size-3-desktop is-size-5-mobile pl-2 green">Ridho Ganteng</h2>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item">
Dashboard
</a>
<a class="navbar-item">
Belanja
</a>
<a class="navbar-item">
Penjualan
</a>

<a class="navbar-item">
Laporan
</a>

</div>
</div>
</nav>

<div class="columns is-mobile my-5">
<div class="column has-text-centered divi">
<a href="./index.html" class="is-size-3-desktop active">Langsung</a>
</div>
<div class="column has-text-centered">
<a href="./penjualanPreOrder.html" class="is-size-3-desktop gray">Pre Order</a>
</div>
</div>

<a href="./tambahProduk.html" class="button is-flex is-align-items-center green mx-5">
<i class="fas fa-plus"></i>
<div class="ml-3 ">Tambah Transaksi</div>
</a>

<div class="block my-5 tp-border">
<div class="list-transaksi is-flex is-align-items-center is-justify-content-space-between px-5 mt-3 pb-3 btm-border">
<h3 class="is-size-5-mobile is-size-3-desktop" >Transaksi</h3>
<div class="aksi buttons are-small">
<button class="button is-rounded bg-green white">Ubah</button>
<button class="button is-rounded bg-green white">Detail</button>
</div>
</div>
<div class="list-transaksi is-flex is-align-items-center is-justify-content-space-between px-5 mt-3 pb-3 btm-border">
<h3 class="is-size-5-mobile is-size-3-desktop" >Transaksi</h3>
<div class="aksi buttons are-small">
<button class="button is-rounded bg-green white">Ubah</button>
<button class="button is-rounded bg-green white">Detail</button>
</div>
</div>
<div class="list-transaksi is-flex is-align-items-center is-justify-content-space-between px-5 mt-3 pb-3 btm-border">
<h3 class="is-size-5-mobile is-size-3-desktop" >Transaksi</h3>
<div class="aksi buttons are-small">
<button class="button is-rounded bg-green white">Ubah</button>
<button class="button is-rounded bg-green white">Detail</button>
</div>
</div>
</div>
</div>
);
}
}

ReactDOM.render(<Hello/>, document.getElementById("app"));
</script>

</body>
</html>

Kode CSS

Lalu buat file dengan nama style.css



.bg-green{
background-color : green;
}
.white{
color : white;
}
.gray{
color : gray;
}
.green {
color : green;
}
.navbar-item {
color : green;
font-size: medium;
}

.navbar-end .navbar-item:hover {
color: white;
background-color : green;
border-radius: 50px;
}

.navigasi {
padding:10px 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.bg-green {
background-color: green;
}

.navbar-brand .navbar-item img {
max-height: 50px;
background-color: green;
border-radius: 50%;
}

.divi {
border-right: 2px solid gray;
}

.active {
color: green;
}

div.aksi .button:hover {
color: white;
}

.btm-border {
border-bottom: 2px solid green;
}

.tp-border {
border-top: 2px solid green;
}

.masukan {
width: 80
}

form.form{
max-width: 1000px;
}

.hscroll {
overflow-x: auto;
padding : 10px;
margin: 10px;
}

div.columns {
margin: 0;
}

Kode JS

Kemudian buat file dengan nama script.js

document.addEventListener('DOMContentLoaded', () => {

// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Check if there are any navbar burgers
if ($navbarBurgers.length > 0) {
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});

Output


 

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar jQuery

-
Gambar
  Apa Sih Itu jQuery? jQuery merupakan library JavaScript yang cukup populer dan mempunyai fitur yang cukup lengkap.  library ini di buat oleh John Resig pada tahun 2006 yang ditujukan untuk memudahkan para developer dalam menggunakan dan menerapkan javascript di website.  Library tersebut melakukan pemrosesan di HTML seperti perubahan dan manipulasi dokumen,  event handling , animasi, dan Ajax sehingga lebih sederhana.  Pada dasarnya jquery mengkompres berbagai baris kode ke dalam sebuah fungsi sehingga kita tidak perlu menulis kemballi semua baris kode hanya untuk menyelesaikan satu pekerjaan.  Hal ini didukung dengan API yang mudah digunakan dan dapat bekerja di berbagai macam browser. Fungsi jQuery? jQuery berfungsi sebagai library JavaScript yang akan membantu Anda mengatur interaksi antara JavaScript dengan HTML yang berjalan di sisi klien. Fitur-Fitur jQuery? Terdapat beberapa fitur unggulan yang dimiliki jQuery sebagai berikut: Fitur yang dapat digu...
Baca selengkapnya

Cara Membuat Database di Excel ~ Part 2

-
Gambar
   Apa Sih Itu Database?                     Microsoft Excel merupakan salah satu program aplikasi bagian dari paket installasi Microsoft Office. Microsoft Excel ini berfungsi untuk mengolah angka dengan menggunakan spreadsheet yang terdiri dari baris dan kolom untuk mengeksekusi perintah.               Dapat membuat database pada Excel sangat membantu dalam hal pekerjaan ataupun urusan lainnya. Kata Database sendiri berasal dari Bahasa Inggris yang berarti basis data. Database merupakan kumpulan informasi yang ada dan disimpan pada komputer. Informasi atau data ini dapat berguna jika digunakan pada masa yang akan datang. Database ini sangat berguna untuk menyimpan suatu informasi pada objek tertentu yang telah diringkas menjadi satu. Database yang akan dibuat ini berisikan suatu informasi. Informasi inilah yang nantinya akan dimasukkan ke dalam sebuah table. Kini, terdapat...
Baca selengkapnya

Query String

-
Gambar
S ebelumnya kita sudah membuat web server dinamis dengan template engine dan handle method POST. Selanjutnya kita akan menambahkan query string ke dalam web server kita. Query string adalah bagian dari URL setelah karakter tanda tanya (?) contohnya   http://localhost:8080/login.html?user=admin   , jadi user=admin merupakan query string. kita langsung saja menambahkan ke web server kita, pertama yang kita lakukan menambahkan di bagian handle request 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 def handle_request(request):      request_message = str(request).split('\r\n')      request_line = request_message[0]      words = request_line.split()      method = words[0]      uri = words[1].strip("/")      query = uri.split('?')      query_string = ''      http_version = words[2]      if(uri ...
Baca selengkapnya