Sabtu, 01 Agustus 2026

reordering column bootstrap 5 | belajar reordering column bagi pemula

 Belajar bagaimana reordering untuk column bagi pemula

maka akan muncul 

 <div class="row" style="height: ;">
      <div class="col-12 col-sm-6 col-lg-3 turun order-2">
         <div class="contoh">1</div>
       </div>
       <div class="col-12 col-sm-6 col-lg-3 turun order-3">
         <div class="contoh ">2</div>

lanjutan responsible column

 kembali lagi dengan bagaimana belajar responsive dengan belajar column , disini kita belajar pembagian column di web mau berapa dan diposisi mana

  <div class="container bordered">
      <div class="row" style="height: 100vh;">
      <div class="col-12 col-sm-6 col-lg-3 turun">
         <div class="contoh">1</div>
       </div>
       <div class="col-12 col-sm-6 col-lg-3 turun">
         <div class="contoh ">2</div>
       </div>

Tutorial Bootstrapp | responsive, breakpoints, container, grid

 belajar container 

untuk membuat container


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css" />
// buat style seperti ini
    <style>
      .bordered {
        border: solid;

tutorial belajar bootstraps | download dan instal bootstraps | bisa ofline maupun online

 download complides css dan js . ini untuk ofline

, tanpa internet pun bisa

setelah download, extrak di folder untuk kita pelajari

buat folder belajar bootsraps , lalu tambahkan file tes.html lalu buka dengan vs code. kemudian isi

ketikkan html5 maka akan muncul 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.min.css">
        // ini adalah cara memasukkan bootstrap dari folder yang sudah kita download,
            kenapa pilih (min) karena ringan, kalo ingin yang lain bisa hapus min nya
</head>

<body>
     <script src="bootstrap-5.0.2-dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

lalu masukkan scrip ini

Tutorial Database ; MySQL where like & wildcard

 Tutorial Database ; MySQL where like & wildcard

Bisa tambahkan nama keluarga / nama belakang kepada murid2 , soalnya misal cari ani tidak muncul harus lengkap nama ani tok


SELECT murid.*, jurusan.nama as nama_jurusan

from murid join jurusan

ON murid.jurusan_id=jurusan.id

where murid.nama like '%ani%

dengan syntax tersebut bisa mencari ini tanpa mengetahui nama lengkap

simbol % bisa disebut wildcard . jenis wildcard ada 2 (% dan _) .  untuk underscore bisa mewakili data huruf , misal kita ketik h_t maka muncul hot hit dll. huruf pertama dan terkahir dan underscore mewakili 1 huruf saja, misal 4 huruf berarti h__t hoot gitu

where murid.nama like '%a__i%' ini akan muncul andi

where murid.nama like '%a_i%' ini akan muncul ani


nah ini ada contoh lagi

SELECT murid.*, jurusan.nama as nama_jurusan

from murid join jurusan

ON murid.jurusan_id=jurusan.id

where murid.nama like '%DOLO%'

 maka akan muncul 2 nama yang ada dolo nya


mending cari % lebih luas untuk pencarian

tutorial database MySQL where - and, where - or, whre - not

pertama - tama kita joinkan dulu murid dengan jurusan , menggunakan SQL

SELECT murid.*, jurusan.nama AS nama_jurusan

FROM murid

JOIN jurusan

ON murid.jurusan_id = jurusan.id;

ini tampilan yang berhasil


ini yang salah


contoh soal kondisi

1. and = kedua syarat terpenuhi supaya menghasilan true/ berhasil

2. or = salah satu syarat maka berhasil

Tutorial database : MySQL Join Table | inner Join, Left Join, Right Join Cross Join

 Belajar join table MySQL ada 4 . yaitu inner Join, Left Join, Right Join dan Cross join / full join dan Alias


seperti pelajar jaman SD , misal yang left


contoh kasus untuk nama, misal di murid ada nama dan jurusan ada nama jurusan. agar tidak bingung maka kita akan menggunakan alias dengan menggunakan seperti berikut


ini contoh crossjoin

Select murid.*, jurusan.nama

from murid

inner join jurusan

on murid.jurusan_id=jurusan.id;


ini contoh alias

Select murid.*, jurusan.nama as nama_jurasan

from murid

inner join jurusan

on murid.jurusan_id=jurusan.id;