Scribd Logo
Unggah

Selamat datang di Scribd!

  • Modul Bloking Vokasi Xi 2

    Diunggah oleh

    kaniaauliashafira02
    5 tayangan7 halaman

    Judul Asli

    Modul Bloking Vokasi Xi 2 (2)

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    5 tayangan7 halaman

    Modul Bloking Vokasi Xi 2

    Diunggah oleh

    kaniaauliashafira02

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 7

    MODUL PRAKTIKUM BLOKING

    KELAS XI SMA PRESTASI PRIMA JAKARTA

    TAHUN PELAJARAN 2023-2024

    NAMA GURU :

    ANDHIKA PUTRA SAEFUDIN, S.Pd.

    MATA PELAJARAN:

    VOKASI

    YAYASAN WAHANA PREST ASI PRIMA


    SMA PREST ASI PRIMA
    JAKARTA
    Kompe tensi keahlian : Ilmu Pengetahuan Alam, Ilmu
    Pengetahuan Sosial
    Jl. Hankam Raya No.89, RT. 07/004, Telp. 021-84306 823
    Cilangkap-Jakarta Timur 13870
    e-mail:
    sekolah@sma.prestasiprima.sch.id
    MEMBUAT KONEKSI

    Kode Koneksi PHP

    Setelah database dibuat, langkah selanjutnya yaitu membuat koneksi antara database dengan PHP. Untuk
    membuat koneksi database caranya sebagai berikut:
    1.Buat folder baru di dalam XAMPP / htdocs dengan nama crud
    2.Setelah membuat folder kemudian buatlah file php di folder tersebut dengan nama file-nya koneksi.php
    3.Berikut kode file php koneksi

    Kode di atas menunjuka bahwa variabel $conn terkoneksi dengan mysql dengan:
    Host : localhost
    User : root
    Password : kosong
    Nama database : db_koleksibuku

    4.Setalah membuat file koneksi.php, kemudian tes koneksi tersebut dengan cara akses ke browser dan
    ketikan http://localhost/crud/koneksi.php. Jika berhasil, tampilan browser akan menunjukan kondisi
    koneksi berhasil.

    5.Jika halaman koneksi gagal, akan muncul tampilan sebagai berikut:


    Menampilkan Data

    Setelah koneksi database dengan PHP berhasil kemudian tes kembali untuk memunculkan data yang
    sebelumnya dimasukkan di dalam database My SQL, yaitu dengan cara:
    1.Membuat file baru dengan nama viewdata.php.
    2.Ketik kode berikut dan save di dalam file tersebut.

    3.Tes koneksi untuk melihat data yang sudah diinputkan ke dalam database dengan cara akses ke browser
    dan ketikkan http://localhost/crud/viewdata.php
    4.Jika berhasil, tampilannya sebagai berikut.

    MENGGUNAKAN BOOSTRAP 4
    Cara Menggunakan Bootstrap

    Pada langkah menggunakan file CSS Bootstrap 4, kita bisa menggunakan Starter Template berupa code
    CSS bootstrap 4 yang sudah ada di laman dengan https://getbootstrap.com/docs/4.0/getting-
    started/introduction/.
    Siapkan code editor kemudian copy starter template tersebut kemudian simpan dengan nama index.php.

    Jalankan file index.php tersebut dengan cara akses ke browser dan ketikkan http://localhost/crud/index.php.

    Membuat Koneksi Halaman Index

    Setelah berhasil menjalankan file index bootstrap, langkah selanjutnya yaitu membuat file index terkoneksi
    dengan database yang sebelumnya sudah dibuat. Tambahkan code script file koneksi pada file index
    sehingga data yang dimasukkan di dalam database bisa ditampilkan. Berikut adalah code script file koneksi
    database.
    <?php
    include_once ("koneksi.php");
    $query= "SELECT * FROM tb_buku";

    $hasil = mysqli_query ($conn, $query);

    while($data=mysqli_fetch_array ($hasil)) { echo $data ['judul_buku'] . "<br/>";


    }
    ?>

    Dari code script tersebut, halaman index akan menampilkan data judul buku yang akan diambil dari
    database tabel buku. Tambahkan code script tersebut di atas code script starter template bootstrap.

    <?php
    include_once ("koneksi.php");
    $query= "SELECT * FROM tb_buku";

    $hasil = mysqli_query ($conn, $query);


    while($data=mysqli_fetch_array ($hasil)) { echo $data ['judul_buku'] . "<br/>";
    }
    ?>
    .<!doctype html>
    <html lang="en">
    <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device- width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/c
    ss/bootstrap.min.css" integrity="sha384- Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263X
    mFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Hello, world!</title>
    </head>
    <body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery- 3.2.1.slim.min.js" integrity="sha384-
    KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJ wFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12. 9/umd/popper.min.js"
    integrity="sha384- ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUib
    X39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/ bootstrap.min.js"
    integrity="sha384- JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1
    MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
    </html>
    Setelah itu cek koneksi halaman index dengan database dengan cara ketikkan http://localhost/crud/index.php.
    Jika berhasil halaman index akan tampil sebagai berikut:

    ++++++ SELAMAT MENGERJAKAN ++++++++

    Anda mungkin juga menyukai