Tugas Kuliah11 - PBKK A


Nama : Zakia Kolbi

NRP : 5025211049

Kelas : PBKK A

Tahun : 2023

Link Repository : Link Github

Latihan Tugas View Pendaftaran Dengan Code Igniter


Untuk Pertemuan 11, masih menggunakan Code Igniter 4 seperti sebelumnya, namun kini kami disuruh membuat view pendaftaran menggunakan Code Igniter. Saya sendiri membuat view untuk PPDB.

Dokumentasinya :



Langkah - Langkah :

Untuk memulai kita perlu menghapus halaman home yang menjadi deafult code igniter. Ada beberapa setup yang perlu dilakukan seperti berikut :

1. Membuat controller untuk mereturn view pendaftaran


2. Mengubah routes yang semula home menjadi pendaftaran karena halaman home belum ada kontennya


3. Membuat desain view pendaftaran untuk ditampilkan

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Registration Form - PBKK A</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.form-icon {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.form-icon img {
width: 100%;
height: auto;
max-width: 100%;
}
form {
max-width: 500px;
}
form label {
display: block;
margin-top: 10px;
color: #666;
}
form input[type="text"],
form input[type="date"],
form input[type="submit"] {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
form input[type="submit"] {
background-color: #17a2b8;;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
form input[type="submit"]:hover {
background-color: #4cae4c;
}
.navbar {
margin-bottom: 20px; /* Add margin-bottom to the navbar */
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="<?= base_url('assets/img/kemdikbud.png') ?>" alt="Logo" style="max-width: 50px; max-height: 50px;">
PPDB Online (Zakia Kolbi - 5025211049)
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pengumuman</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Mendaftar <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1>Pendaftaran Tahun Ajaran 2023/2024</h1>
<div class="row">
<div class="col-md-4 d-flex align-items-center justify-content-center">
<div class="form-icon">
<img src="<?= base_url('assets/img/register.png') ?>" alt="Register Icon">
</div>
</div>
<div class="col-md-8">
<div class="form-fields">
<form action="submit_registration" method="post">
<div class="form-group">
<label for="nisn">NISN</label>
<input type="text" id="nisn" name="nisn" class="form-control" placeholder="NISN" required>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="full_name">Nama Lengkap</label>
<input type="text" id="full_name" name="full_name" class="form-control" placeholder="Nama Lengkap" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="nickname">Nama Panggilan</label>
<input type="text" id="nickname" name="nickname" class="form-control" placeholder="Nama Panggilan" required>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="birth_place">Tempat Lahir</label>
<input type="text" id="birth_place" name="birth_place" class="form-control" placeholder="Tempat Lahir" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="birth_date">Tanggal Lahir</label>
<input type="date" id="birth_date" name="birth_date" class="form-control" required>
</div>
</div>
</div>
<div class="form-group">
<label for="jenis_kelamin">Jenis Kelamin</label>
<input type="text" id="jenis_kelamin" name="jenis_kelamin" class="form-control" placeholder="Jenis Kelamin" required>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="email">Email</label>
<input type="text" id="email" name="email" class="form-control" placeholder="Email" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="notelp">No Telp Siswa</label>
<input type="text" id="notelp" name="notelp" class="form-control" placeholder="No HP/WA" required>
</div>
</div>
</div>
<!-- Add additional fields here -->
<input type="submit" value="Submit" class="btn btn-primary">
</form>
</div>
</div>
</div>
</div>
<!-- End registration form -->
</body>
</html>
view raw v_pendaftaran.php hosted with ❤ by GitHub

Komentar

Posting Komentar

Postingan populer dari blog ini

Final Project Pemrograman Berbasis Kerangka Kerja

Gambar
Nama : Zakia Kolbi NRP : 5025211049 Kelas : PBKK A Tahun : 2023 Final Project Pemrograman Berbasis Kerangka Kerja Paper Reference 1. Deskripsi Studi Kasus berdasarkan MVC nya Jawaban  : Untuk Final Project ini, studi kasus yang saya pilih adalah pembuatan aplikasi inventaris barang menggunakan framework CodeIgniter. Pada pengimplementasiannya, aplikasi ini juga akan menghandle beberapa bagian dari jalannya inventaris barang pada perusahaan yang berkaitan seperti data barang, kategori, kondisi, ruang, user, peran dan akses. Jika dilihat dari MVC atau Model-View-Controllernya berikut merupakan penjalasan aplikasi perbagiannya berdasarkan jurnal referensi diatas : Model: Model bertanggung jawab untuk mengakses dan memanipulasi data dari database atau sumber data lainnya. Dalam aplikasi inventaris barang, Model dapat mencakup struktur data untuk menyimpan informasi barang, metode untuk menambah, menghapus, atau memperbarui barang, dsb. View: Bertanggung jawab untuk menampilkan data k...
Baca selengkapnya

ETS - Pemrograman Web A

Gambar
Nama : Zakia Kolbi NRP : 5025211049 Kelas : Pemrograman Web A Tahun : 2023 Link Github:  Github Link Youtube :  Link YT Evaluasi Tengah Semester Pertanyaan Jelaskan fungsi html, css, javascript, bootstrap, dalam pembangunan aplikasi web. Buatlah screenshot dari aplikasi yang telah dikerjakan, kemudian buat link ke tugas source codenya. Sebuah perpustakaan ingin membuat aplikasi web. Fungsi aplikasi untuk display koleksi buku, peta lokasi, informasi berita/ kegiatan, dan pendaftaran online. Desainkan front end website perpustakaan. Implementasikan desainmu dan buat dokumentasi. Presentasikan dalam video youtube, dan diembedded ke dalam blog dokumentasi. Jawaban 1. Berikut Fungsi HTML, CSS, JavaScript, Bootstrap HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membuat halaman web. HTML digunakan untuk menandai dan memformat konten pada halaman web, seperti teks, gambar, dan video. HTML juga digunakan untuk membuat tautan antara halaman web dan meng...
Baca selengkapnya

Final Project Pemrograman Web

Gambar
Nama : Zakia Kolbi NRP : 5025211049 Kelas : Pemrograman Web A Tahun : 2023 Final Project Pemrograman Web 1. Buatlah deskribsi studi kasus pemrograman web (individu) Jawaban : Sebuah lembaga bimbingan belajar terkemuka memutuskan untuk mengembangkan aplikasi web guna meningkatkan efektivitas proses pembelajaran, manajemen siswa, dan interaksi antara guru, siswa, dan orang tua. Tujuan utama aplikasi ini adalah menyediakan platform yang terintegrasi untuk mengelola jadwal bimbingan, materi pelajaran, komunikasi, dan pelaporan perkembangan siswa. Struktur Menu : Dashboard: Tempat user memilih login atau membuat akun baru Sign-up: User membuat akun baru Login (Admin, Guru, Siswa): User masuk ke akun yang sudah ada Add Materi : User(admin, guru) melakukan tambah materi Courses: User memilih course List Siswa: List daftar siswa List Guru: List daftar guru List Materi: List daftar materi Logout: User keluar akun Kebutuhan Software: PHP sebagai bahasa backend MySQL sebagai database untuk menyim...
Baca selengkapnya