<Web Fundamental/>

Building Mini E-commerce with HTML, CSS and JavaScript

with Diky Arga at Mozilla Community Space

Diky Arga

Dinusian &

Open Source Enthusiast

Part of

Doscom.org - Dinus Open Source Community

&

Mozilla Foundation as Mozilla Tech Speaker

Work at

 

 

as Front-end Developer

Coding + Gowes

@dikyarga || dikyarga.com

Quick survey

Siapa yang belum pernah belajar                        ?

✋

HTML

CSS

JavaScript

Outline

  • Basic HTML (structure)
  • Basic CSS (layout)
  • Basic JavaScript (logic)
  • How client and server communicate
  • Fetch Products Data from server
  • Display to the DOM
  • Post a Product to Server

Analogi dari HTML, CSS and JavaScript

Seperti layaknya berbie

JavaScript

CSS

HTML

Kerangka Halaman Web

Mempercantik Kerangka

Membuat Web Interaktif

Kerangka Dasar HTML

Image source : http://estmary.2020.madeateps.org/html-structure/

Anatomi dari Tag HTML

Image source : https://citsf221.community.uaf.edu/06-css-and-html/

  • Setiap elemen HTML harus memiliki sebuah tag pembuka dan penutup (walaupun ada beberapa elemen yang self-closing)

  • Di antara tag pembuka, ada attributes yang dapat di isi dengan suatu nilai-nilai.

  • Di antara tag pembuka dan penutup adalah tempat meletakan isi konten

Mulai menulis HTML

Buka Code Editor

Buat File bernama index.html

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Fundamental Web</title>
</head>
<body>
    Karena tulisan ini ada di dalam tag body, 
    maka akan di tambilkan di laman peramban. 
</body>
</html>

Tulis contoh kode berikut

Contoh-contoh HTML tag sederhana yang sering di gunakan

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Fundamental Web</title>
</head>
<body>
  <h1>Heading 1 - Paling besar</h1> <!--h kependekan dari heading-->
  <!-- contoh komentar di HTML yang tidak akan di proses oleh peramban -->
  <h2>Heading 2</h2>
  <h6>Heading 6 - Paling kecil</h6>
  <p> <!-- p kependekan dari paragraf -->
    Ini kalimat dalama paragraf, 
    <b>tulisan ini akan di cetak tebal</b>, 
    <i>sedangkan ini bercetak miring</i>
    <br/> <!-- contoh self encolsing tag  -->
    Ini seharunya di bawah kalimat pertama dua baris
  </p>
  <a href="https://mozilla.or.id">Web resmi Mozilla Indonesia</a>
  <img src="https://mozilla.or.id/images/stories/datas/ava-mozillians.png" 
    alt="Gambar Dimo Mozilla Indonesia"/>
</body>
</html>

Buat Kerangka Mini-Ecommerce

fokus pada struktur webpage (tanpa styling)

coba bareng-bareng

sampel kode menyusul

C

S

S

ascading

sheet

style

 

  • bukan bahasa pemprograman
  • di gunakan untuk membentuk layout dan desain
  • dapat di kembangkan lebih canggih (seperti SASS, LESS, etc)

3 metode menambahkan style

1. Inline (not recommended)

<p style="color: red;">Mozilla Indonesia</p>

2. Internal Style

<!DOCTYPE html>
<html>
<head>
<title>Internal Style</title>
<style type=”text/css>
p {
    color: red;
    font-size: 14px;
}
</style>
</head>

2. External Style (recommended)

<link href=”folder/nama-file.css” rel=”stylesheet” type=”text/css>

Cara pakai CSS Selector

source : https://en.support.wordpress.com/custom-design/css-basics/

Tag Sebuah tag HTML, seperti H1, p, div, dll
Class class attribute untuk tag HTML yang lebih dari satu, seperti <p class="nama-class">Contoh text.</p>. Di referensikan sebagai titik “.” sebelum nama class
ID Direferensikan dengan hashtag #hashtag 
HTML tag selector:
	
<p>Sample paragraph.</p>

HTML tag selector CSS:

p {
    color: red;
    font-size: 200%;
}
class css
	
<h1 class="title">
    Ini Judul
</h1>

HTML tag selector CSS:

.title {
    color: yellow;
}
ID selector
	
<div id="signin">
    form misalnya
</div>


#signin {
 background-color: #030303;
}

Coba main-main CSS style sering di pakai

color

 

font-size

 

text align

 

background

 

border

 

 

color: red;
color: #000000;
color: rgb(0, 191, 255);
font-size: 27px;
text-align: center;
background: #123443;
border: 2px solid red;

Margin dan Padding

https://developer.mozilla.org/en-US/docs/Web/CSS/margin

https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model

contoh

programmer itu sah-sah aja copas, alas paham apa yang di copas

- Diky Arga, 2019

buat latihan2.css

body {
  background-color: cornsilk;
}

h1 {
  color:#FF4136;
}

h6 {
  font-size: 20px;
}

.title {
  text-align: center;
}

#mascot {
  height: 200px;
  border: 2px solid red;
  padding: 30px;
  margin: 50px;
} 
  <head>
    <title>Belajar HTML</title>
    <link rel="stylesheet" href="latihan2.css">
  </head>

tambahkan link ke file latihan2.css di dalam tag head di file latihan1.html / sebelumnya

Cukup main-mainnya, mari kerja nyata :D

buat file ecommerce.html

buat file ecommerce.css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Mozilla Store</title>
    <link rel="stylesheet" href="ecommerce.css" />
  </head>

  <body>
    <header>
      <img src="mozilla-logo.jpg" alt="Mozilla Logo" />
      <div class="search-bar">
        <form>
          <input type="text" placeholder="Cari merchendise resmi Mozilla..."/>
          <button>Cari</button>
        </form>
      </div>
      <nav>
        <ul>
          <li><a href="/about">Tentang</a></li>
          <li><a href="/contact">Kontak</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <div class="container">
        <h2>Selamat datang di Mozilla Indonesia Merchendise Store</h2>
        <div class="products"></div>
      </div>
    </main>
    <footer>Di buat dengan <3 spesial untuk mu</footer>
  </body>
</html>
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header img {
  height: 50px;
}

header * {
  display: inline;
}

main {
  width: 100%;
  text-align: center;
}

.container {
  width: 70%;
  margin: 0 auto;
}

.products{
  display: flex;
  justify-content: center;
}

footer {
  position: fixed;
  bottom: 5px;
  left: 100px;
}

Kenalan dengan JavaScript

ngak ada hubungannya dengan Java

Bahasa pemprograman yang di buat untuk berjalan peramban awalnya, sekarang dapat berjalan di sisi server, mobile hingga IoT

Variable

Rekomendasi penggunaan variable

  • gunakan nama secara deskriptif
  • case sensitif
  • tidak bisa pakai reserve keyword  ("if", "for", "else")
  • tidak di awali dengan angka
  • konvensi camelCase

Contoh : productName

Variable di JavaScript

Ada beberapa jenis pendeklarian variable di JavaScript

var (variable)

const  

let (recommended)

var namaVariable = 'Isi variable'
let namaVariableLain = 17
const pi = 3.14

contoh

untuk mendeklarasikan konstanta, tidak dapat di rubah

Logging sederhana di JS

Menampilkan sebuah nilai ke console peramban, seperti System.out.print di Java

console.log('Nilai yang ingin di keluarkan')
console.log('Menampilkan isi dari variable', variableName)

Object di JS

contoh sintaks

const person = {
    name: 'Diky Arga',
    age: 23,
    hobbies: ['skateboarding', 'make things']
}

Selayaknya objek dalam kehidupan nyata, yang memiliki property dan nilai nya masing-masing.

sintaks nya dalam {}

berisi pasangan key dan value

Array di JS

Intinya sekumpulan nilai-nilai yang di urutkan berdasarkan indeks yang di mulai dari 0

An array can be defined as an ordered collection of items indexed by contiguous integers.

https://www.toolsqa.com/data-structures/array-in-programming/

const hobbies = ['make things', { name: 'abc'}, 17, 'repeat']

contoh

Function di JS

A function is a group of reusable code

Sintak penulisan fungsi di JS

sumber gambar : https://www.miltonmarketing.com/coding/javascript/learn-about-javascript-functions/

function calculateTotal(amount, price) {
    return amount * price;
}

const total = calculateTotal(10, 17000);

console.log('Total : ', total);

coba-coba

contoh kode latihan3.js

var variableName = 'Isi variable'

console.log('variable name :', variableName)

let letName = 2343

console.log('let name :', letName)

const pi = 3.14

console.log('pi :', pi)


let person = {
  name: 'Diky Arga'
}

console.log('objek person : ', person)

const hobbies = ['make things', { name: 'abc'}, 17, 'repeat']

console.log('array hobbies : ', hobbies)

function calculateTotal(amount, price) {
  return amount * price;
}

const total = calculateTotal(10, 1700)

console.log('totalnya adalah ', total)

jangan lupa panggil ke latihan1.html dengan tag script

<script src="latihan3.js"></script>

Gimana Server dan Client ngobrol?

source : https://restful.io/an-introduction-to-api-s-cee90581ca1b

https://www.fullstackpython.com/web-servers.html

A

P

I

pplication

nterface

programming

JavaScript Fetch

Menarik data dari server dengan fungsi bawaan peramban

contoh

fetch('https://mini-ecommerce.filosofikode.com/products')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

fetch('URL', {options})

Selesaikan apa yang kita mulai

buat file ecommerce.js

load tersebut dengan script persis sebelum penutup tag body

<script src="ecommerce.js"></script>
function getProducts() {
  fetch('https://mini-ecommerce.filosofikode.com/products')
    .then(res => res.json())
    .then(result => {
    console.log('hasilnya : ', result)
  })
}

getProducts()

Render it to the DOM (Document Object Model)

sumber gambar : https://simplesnippets.tech/what-is-document-object-modeldom-how-js-interacts-with-dom/

coba tampilkan hasil ke DOM

document.querySelector('.products').innerHTML = JSON.stringify(result)

Template String

`string text ${expression} string text`
let a = 1;
let b = 3;

console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

pelajari lebih lanjut : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.

fungsi .map

Sederhananya perulangan sebuah Array dan mehasilkan array baru menggunakan pendekatan yang lebih sederhana dengan functional programming

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

JS querySelector dan innerHTML

menyeleksi elemen DOM dengan querySelector

menimpa konten innerHTML yang telah terseleksi

const productSection = document.querySelector('.products');
productSection.innerHTML = "<h1> Tag HTML </h1>";

Rapikan kode supaya lebih mudah di baca kelak atau oleh orang lain

function getProducts() {
  fetch('https://mini-ecommerce.filosofikode.com/products')
    .then(res => res.json())
    .then(result => {
    console.log('hasilnya : ', result)

    const resultHTML = result.map(product => renderProduct(product))
    const productSelector = document.querySelector('.products')

    productSelector.innerHTML = resultHTML;
  })
}

function renderProduct(product) {
  return `
    <div class="product">
    <img
      class="product-image"
      src="${product.imageUrl}"
      alt="${product.name}"
    />
    <h3>${product.name}</h3>
    <h5 class="product-detail__price">Rp. ${product.price}</h5>
    <p>${product.description}</p>
    <button class="button is-primary">Beli Sekarang</button>
  </div>
  `
}

getProducts()

Bikin Fitur Cari Barang

sebaiknya di bungkus tag <form>

<form>
  <input type="text" placeholder="Cari merchendise resmi Mozilla..." id="keyword" />
  <button onclick="search()">Cari</button>
</form>

onclick event

 <button onclick="search()">Cari</button>

Buat fungsi searching

pastikan atribut type pada <button> adalah 'button' supaya tidak load page, nilai bawaan 'submit'

<button onclick="search()" type="button">Cari</button>
function search() {
  let keyword = document.getElementById('keyword').value
  getProducts(keyword)
}

Modifikasi fungsi getProducts supaya menirma parameter dinamis

jangan lupa tambahkan default parameter

function getProducts(keyword) {
  fetch('https://mini-ecommerce.filosofikode.com/products?name_contains=' + keyword)
    .then(res => res.json())
    .then(result => {
    let resultHTML = result.map(product => renderProduct(product))

    document.querySelector('.products').innerHTML = resultHTML
  })
}
function getProducts(keyword = '') {
// kode
}

Percantik tampilan

dengan CSS Framework

load file css

sesuaikan nama class

<link rel="stylesheet" 
    href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" 
/>
<button class="button is-primary">Beli Sekarang</button>

Kondisional if jika pencarian tidak di temukan

buat fungsi renderNotFound()

cek apakah hasil dari fetching lebih dari 0

function renderNotFound() {
  return `
    <h4>Maaf produk yang kamu cari udah di borong orang</h4>
  `
}
    if (result.length > 0) {
      resultHTML = result.map(product => renderProduct(product))
    } else {
      resultHTML = [renderNotFound()]
    }

Buat form upload barang

Jika waktunya sampai

Kirim data barang ke Server

Jika waktunya sampai

Bonus!

Repository Github proyek ini :

https://github.com/dikyarga/web-fundamental-workshop

Misi selanjutnya

Bikin web film listing dengan API : https://swapi.co/api/films/

<terima-kasih/>

Diky Arga, Mozilla Indonesia

Link ke Slide ini

https://slides.com/dikyarga/web-fundamental

Web Fundamental

By Diky Arga

Made with Slides.com

Web Fundamental

  • 969

More from Diky Arga