Cara menggunakan bootstrap mahasiswa

Question

CRUD PHP & MySQLi Dengan Bootstrap : Input Data Ke Database - Halo teman-teman semuanya diartikel sebelumnya kita sudah membahas bagaimana cara membuat sebuah koneksi dari PHP ke Database kita.

Table of Contents Show

Apa itu bootstrap dan fungsinya?
Framework bootstrap terdiri dari file apa saja?
Apa alamat web resmi bootstrap?
Bagaimana cara mendownload bootstrap?

Pada tutorial kali ini, kita semua akan belajar bagaimana caranya memasukkan data atau input data dari PHP ke database yang sudah kita buat sebelumnya.

Untuk teman-teman yang baru belajar, silahkan dibaca artikel sebelumnya tentang cara membuat koneksi dari PHP ke Database di Part 1.

Sebelum kita membuat form yang digunakan untuk menyimpan data ke database, langkah pertama kita harus buat sebuah tabel baru terlebih dahulu di dalam database db_sekolah yang sudah kita buat di artikel pertama.

Silahkan buka dan klik db_sekolah. Dan buatlah tabel baru dengan nama tbl_siswa, kurang lebih seperti gambar dibawah ini.

Dari gambar pembuatan tabel diatas, berikut penjelasan singkatnya:

id_siswa - digunakan sebagai PRIMARY KEY dan dijadikan AUTO INCREMENT dengan tipe data INT dan dengan Lenght / Value 11, dimana kolom ini sebagai perwakilan satu record / satu baris.
nisn - kolom ini digunakan untuk menyimpan data NISN dengan tipe data VARCHAR dengan Lenght / Value 50.
nama_lengkap - kolom ini digunakan untuk menyimpan nama lengkap dari siswa dengan tipe data VARCHAR dengan Lenght / Value 200.
alamat - dan yang kolom terakhir ini adalah untuk menyimpan alamat dari data siswa, di kolom ini kita menggunakan tipe data TEXT dan kita tidak perlu meberikan isian dari Lenght / Value.

Jika sudah berhasil semuanya, kita sekarang lanjut membuat tampilan form yang digunakan untuk menyimpan data siswa ke dalam database.

Silahkan buat file baru dengan nama tambah-siswa.php di dalam folder sekolah, jadi kurang lebih strukturnya seperti pada gambar berikut ini.

Pada kesempatan kali ini, untuk tampilan kita akan menggunakan Bootstrap 4, jadi kita tidak perlu membuat CSS lagi dari awal dan proses pembuatan tampilan akan sangat cepat dan terbantu.

Untuk file Bootstrap yang akan kita gunakan adalah online atau mengambil dari CDN, jika teman-teman ingin mencobanya secara offline, teman-teman bisa mengunduh file bootstrap dan di taruh di folder project kita.

Untuk kode tambah-siswa.php, silahkan teman-teman copy dan paste kode dibawah ini kedalam file tambah-siswa.php yang sudah kalian buat sebelumnya.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <title>Tambah Siswa</title>
  </head>

  <body>

    <div class="container" style="margin-top: 80px">
      <div class="row">
        <div class="col-md-8 offset-md-2">
          <div class="card">
            <div class="card-header">
              TAMBAH SISWA
            </div>
            <div class="card-body">
              <form action="simpan-siswa.php" method="POST">
                
                <div class="form-group">
                  <label>NISN</label>
                  <input type="text" name="nisn" placeholder="Masukkan NISN Siswa" class="form-control">
                </div>

                <div class="form-group">
                  <label>Nama Lengkap</label>
                  <input type="text" name="nama_lengkap" placeholder="Masukkan Nama Siswa" class="form-control">
                </div>

                <div class="form-group">
                  <label>Alamat</label>
                  <textarea class="form-control" name="alamat" placeholder="Masukkan Alamat Siswa” rows="4"></textarea>
                </div>
                
                <button type="submit" class="btn btn-success">SIMPAN</button>
                <button type="reset" class="btn btn-warning">RESET</button>

              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  </body>
</html>

Dan jika dijalankan dengan mengetikkan http://localhost/sekolah/tambah-siswa.php, maka jika berhasil tampilannya kurang lebih seperti berikut ini:

Perlu di perhatikan pada baris kode berikut ini :

<form action="simpan-siswa.php" method="POST">

Dari kode diatas, form yang sudah kita buat akan mengarah ke file baru yang bernama simpan-siswa.php, jadi proses input dari form akan langsung di proses oleh file yang bernama simpan-siswa.php dengan menggunakan method POST.

Sekarang kita buat file baru dengan nama simpan-siswa.php didalam folder sekolah, yang mana file ini sejajar dengan file tambah-siswa.php.

Dan silahkan masukkan kode berikut ini kedalam file simpan-siswa.php:

<?php

//include koneksi database
include('koneksi.php');

//get data dari form
$nisn           = $_POST['nisn'];
$nama_lengkap = $_POST['nama_lengkap'];
$alamat       = $_POST['alamat'];

//query insert data ke dalam database
$query = "INSERT INTO tbl_siswa (nisn, nama_lengkap, alamat) VALUES ('$nisn', '$nama_lengkap', '$alamat')";

//kondisi pengecekan apakah data berhasil dimasukkan atau tidak
if($connection->query($query)) {

    //redirect ke halaman index.php 
    header("location: index.php");

} else {

    //pesan error gagal insert data
    echo "Data Gagal Disimpan!";

}

?>

Lihat pada kode berikut ini :

//get data dari form
$nisn                     = $_POST['nisn'];
$nama_lengkap   = $_POST['nama_lengkap'];
$alamat                 = $_POST['alamat'];

Kode diatas adalah sebuah deklarasi variabel yang mana isinya mengambil dari hasil input Form.

Dan coba perhatikan pada baris kode berikut ini :

//query insert data ke dalam database
$query = "INSERT INTO tbl_siswa (nisn, nama_lengkap, alamat) VALUES ('$nisn', '$nama_lengkap', '$alamat')";

Pada kode diatas itu adalah sebuah Query yang digunakan untuk menyimpan data ke dalam database.

Dan untuk lihat kode berikut ini :

//kondisi pengecekan apakah data berhasil dimasukkan atau tidak
if($connection->query($query)) {

    //redirect ke halaman index.php 
    header("location: index.php");

} else {

    //pesan error gagal insert data
    echo "Data Gagal Disimpan!";

}

Kode diatas adalah sebuah kondisi dimana jika variabel bernilai TRUE atau Query berjalan maka otomatis kita akan diarahkan ke dalam file yang bernama index.php.

Tapi jika kondisi tidak terpenuhi atau bernilai FALSE, maka akan mengeluarkan pesan error “Data Gagal Disimpan!”.

Terakhir, karena jika berhasil menyimpan data ke database akan langsung di arahkan ke file yang bernama index.php. maka otomatis kita harus membuat file baru dengan nama index.php di dalam folder sekolah.

Dan untuk pembahasan index.php akan kita bahas pada artikel selanjutnya. Untuk index.php ini adalah tahap bagaimana data ditampilkan dari Database ke browser atau aplikasi kita.

Artikel ini dibaca sebanyak 14.017 kali

Apa itu bootstrap dan fungsinya?

Bootstrap adalah sebuah framework HTML, CSS, dan JavaScript yang berfokus untuk menyederhanakan pengembangan halaman web atau website. Pada umumnya, Bootstrap digunakan untuk mengimplementasikan berbagai pilihan warna, ukuran, font, dan layout yang ada dalam framework tersebut ke dalam sebuah website.

Framework bootstrap terdiri dari file apa saja?

Bootstrap terdiri dari kumpulan syntax yang dikompilasi dalam tiga file utama: Bootstrap.css, Bootstrap.js, dan Glyphicons. Perlu diingat bahwa Bootstrap memerlukan library JS yang disebut jQuery untuk menjalankan plugin dan komponen JS.

Apa alamat web resmi bootstrap?

anda dapat mendownload langsung bootstrap pada website resminya di http://getbootstrap.com/getting-started/. untuk sampai saat ini bootsrap telah di rilis sampai versi 4. klik di sini untuk mendapatkan bootstrap versi 4. berikut ini adalah struktur isi dari bootstrap setelah anda mendownloadnya.

Bagaimana cara mendownload bootstrap?

Pada saat tutorial ini saya tulis, Bootstrap baru saja merilis update ke versi 5.1. Untuk mendownload file Bootstrap, silahkan buka web resmi Bootstrap di getbootstrap.com, lalu klik tombol Download yang ada di tengah halaman.

kode bootstrap Bootstrap download Bootstrap 4 Bootstrap tutorial