Scribd Logo
Unggah

Selamat datang di Scribd!

  • Praktikum Tambahan 01

    Diunggah oleh

    Falah Miftah
    13 tayangan2 halaman
    Bcdb

    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
    Bcdb

    Hak Cipta:

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

    Praktikum Tambahan 01

    Diunggah oleh

    Falah Miftah
    Bcdb

    Hak Cipta:

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

    Desain Form Dengan Framework Bootstrap

    1. Masuk website bootstrap


    2. Download bootstrap versi 4
    3. Setelah selesai download, exstract file bootstrap hasil download
    4. Pindahkan folder hasil exstract boostrap 4 ke folder xampp/htdoc
    5. Rename folder bootstrap menjadi CRUD2023
    6. Masuk ke Dreamweaver atau Notepad
    7. File – New – PHP
    8. Tambahkan <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> pada bagian
    <head>
    9. Tambahkan <script type="text/javascript" src="js/bootstrap.min.js"></script> sehingga tampilan
    listing program seperti dibawah ini :

    10. Tambahkan judul


    11. Masuk ke web bootstrap, cari feature card, cari yang menggunakan header footer lalu copy listing
    programnya. Lalu paste diantara <body> dan </body>
    <div class="card">
    <div class="card-header">
    Featured
    </div>
    <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to
    additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    </div>
    12. Tambahkan class container dibawah <body> dan </div> diatas <script>
    13. Ganti Header Menjadi “Form Input Mahasiswa”
    14. Hapus bagian dibawah ini :
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to
    additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>

    15. Tambahkan form


    16. Tambahkan Label dan TextField Untuk NIM
    <div class="form-group">
    <label>NIM</label>
    <input type="text" name="vnim" class="form-control" placeholder="Input NIM Anda Disini"
    required>
    </div>
    17. Copy listing diatas untuk membuat Nama
    <div class="form-group">
    <label>Nama</label>
    <input type="text" name="vnama" class="form-control" placeholder="Input Nama Anda Disini"
    required>
    </div>
    18. Lakukan hal diatas untuk membuat alamat dan kelas
    19. Tambahkan Button Simpan
    <button type="submit" class="btn btn-success" name="bsimpan">Simpan</button>
    20. Copy listing diatas untuk membuat button kosongkan
    21. Jika sudah selesai, coba jalankan . Hasilnya akan tampil seperti dibawah ini :

    Anda mungkin juga menyukai