Membuat tampilan website dengan framework bootstrap

Membuat tampilan website dengan framework bootstrap

Bootstrap adalah Kerangka CSS yang paling populer untuk mengembangkan situs web yang responsif.

Pada tutorial ini kita akan memakai bootsrap 4 yaitu versi terbaru dari pendahulunya bootsrap versi 3. Untuk mendapatkannya kita bisa mendownload boostrap dilink berikut: https://getbootstrap.com/

Sebelumnya admin telah membuat artikel CRUD PHP NATIVE MYSQLI Data Pelanggan. nah pada kesempatan kali ini pula kita akan memasang memperbarui tampilan menggunakan boostrap 4.

Pada tampilan sebelumnya adalah seperti ini:

Lalu akan kita rubah seperti:

Terlihat jelas sekali bukan perbedaanya 🙂

Pertama kita buat dahulu ranggka html seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

</body>
</html>

didalam <head> kita isikan link cdn bootsrapnya:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

meta viewport dengan content device width agar mendukung layar hp. Selanjutnya kita panggil library css dan javascriptnya sehingga htmlnya menjadi seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <title>CRUD DATA PELANGGAN</title>
  <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>

Untuk membuat bagian pada kata CRUD MYSQLI DATA PELANGGAN .Membuat crud data pelanggan. kita akan menggunakan class css dari bootsrap yaitu class jumbotron dengan class text-center agar text berada ditengah.

<div class="jumbotron text-center">
  <h1>CRUD MYSQLI DATA PELANGGAN</h1>
  <p>Membuat crud data pelanggan</p> 
</div>

Kemudian untuk membuat bagian tabelnya kita masukan terlebih dahulu element table kedalam class container lalu buat class row dan diisi dengan class col-md contohnya seperti berikut:

<div class="container">
  <div class="row">
    <div class="col-md-2">
    </div>
    <div class="col-md-8">
    
    </div>
    <div class="col-md-2">
    </div>
  </div>
</div>

karena row itu maksimalnya 12 jadi saya buat dari kiri kekanan 2+8+2=12. Uuntuk tabelnya kita kasih class table lalu diikuti class table-bordered table-hovered. fungsinya agar table mempunyai border dan dapat disorot. terakhir untuk membuat button mempunyai warna hijau didapat dari class btn btn-success dan button hapus didapat dari class btn btn-info.

Bila digabungkan jadinya akan seperti ini:

<?php
ini_set("error_reporting", 0);
include "koneksi.php";
$query = "SELECT * FROM tbl_pelanggan"; 
$result = mysqli_query($link, $query);
$num_rows = mysqli_num_rows($result);
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="jumbotron text-center">
  <h1>CRUD MYSQLI DATA PELANGGAN</h1>
  <p>Membuat crud data pelanggan</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-2">
    </div>
    <div class="col-sm-8">
    <?php 
  if($num_rows>0){ ?>
    <button type="button" class="btn btn-success" onclick="window.location='form_pelanggan.php'">Tambah[+]</button><p>
    <table class="table table-bordered table-hovered">
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Nohp</th>
        <th>Alamat</th>
        <th colspan="2">Action</th>
      </tr>
    <?php $no=0; while ($row = mysqli_fetch_assoc($result)) { $no++; ?>
      <tr>
        <td><?php echo $no;?></td>
        <td><?php echo $row['nama_pelanggan'];?></td>
        <td><?php echo $row['nohp_pelanggan'];?></td>
        <td><?php echo $row['alamat_pelanggan'];?></td>
        <td><button type="button" onclick="window.location='delete.php?&id=<?php echo $row['id_pelanggan'];?>'" class="btn btn-danger">Hapus</button></td>
        <td><button type="button" class="btn btn-info" onclick="window.location='edit.php?&id=<?php echo $row['id_pelanggan'];?>'">Edit</button></td>
      </tr>
    <?php } ?>
    </table>
  <?php }else{
    echo "Data pelanggan belum ada.. [<a href='form_pelanggan.php'>Tambah data</a>]";
  }
  ?>
    </div>
    <div class="col-sm-2">
    </div>
  </div>
</div>

</body>
</html>

 

Related posts

Leave a Comment