-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathform_ubah.php
198 lines (180 loc) · 10.2 KB
/
form_ubah.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<div class="d-flex flex-column flex-lg-row mt-5 mb-4">
<!-- judul halaman -->
<div class="flex-grow-1 d-flex align-items-center">
<i class="fa-regular fa-user icon-title"></i>
<h3>Siswa</h3>
</div>
<!-- breadcrumbs -->
<div class="ms-5 ms-lg-0 pt-lg-2">
<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="https://pustakakoding.com/" class="text-dark text-decoration-none"><i class="fa-solid fa-house"></i></a></li>
<li class="breadcrumb-item"><a href="?halaman=data" class="text-dark text-decoration-none">Siswa</a></li>
<li class="breadcrumb-item" aria-current="page">Ubah</li>
</ol>
</nav>
</div>
</div>
<?php
// mengecek data GET "id_siswa"
if (isset($_GET['id'])) {
// ambil data GET dari tombol ubah
$id_siswa = $_GET['id'];
// sql statement untuk menampilkan data dari tabel "tbl_siswa" berdasarkan "id_siswa"
$query = $mysqli->query("SELECT * FROM tbl_siswa WHERE id_siswa='$id_siswa'")
or die('Ada kesalahan pada query tampil data : ' . $mysqli->error);
// ambil data hasil query
$data = $query->fetch_assoc();
}
?>
<div class="bg-white rounded-4 shadow-sm p-4 mb-5">
<!-- judul form -->
<div class="alert alert-primary rounded-4 mb-5" role="alert">
<i class="fa-solid fa-pen-to-square me-2"></i> Ubah Data Siswa
</div>
<!-- form ubah data -->
<form action="proses_ubah.php" method="post" enctype="multipart/form-data" class="needs-validation" novalidate>
<div class="row">
<div class="col-xl-6">
<div class="row g-0">
<div class="mb-3 col-xl-6 pe-xl-3">
<label class="form-label">ID Siswa <span class="text-danger">*</span></label>
<input type="text" name="id_siswa" class="form-control" value="<?php echo $data['id_siswa']; ?>" readonly>
</div>
<div class="mb-3 col-xl-6 pe-xl-3">
<label class="form-label">Tanggal Daftar <span class="text-danger">*</span></label>
<input type="text" name="tanggal_daftar" class="form-control datepicker" autocomplete="off" value="<?php echo date('d-m-Y', strtotime($data['tanggal_daftar'])); ?>" required>
<div class="invalid-feedback">Tanggal daftar tidak boleh kosong.</div>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="mb-3 ps-xl-3">
<label class="form-label">Kelas <span class="text-danger">*</span></label>
<select name="kelas" class="form-select" autocomplete="off" required>
<option value="<?php echo $data['kelas']; ?>"><?php echo $data['kelas']; ?></option>
<option disabled value="">-- Pilih --</option>
<option value="Data Analysis">Data Analysis</option>
<option value="Digital Marketing">Digital Marketing</option>
<option value="Game Development">Game Development</option>
<option value="Mobile Development">Mobile Development</option>
<option value="Web Design">Web Design</option>
<option value="Web Development">Web Development</option>
</select>
<div class="invalid-feedback">Kelas tidak boleh kosong.</div>
</div>
</div>
</div>
<hr class="mb-4-2">
<div class="row">
<div class="col-xl-6">
<div class="mb-3 pe-xl-3">
<label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
<input type="text" name="nama_lengkap" class="form-control" autocomplete="off" value="<?php echo $data['nama_lengkap']; ?>" required>
<div class="invalid-feedback">Nama lengkap tidak boleh kosong.</div>
</div>
<div class="mb-4 pe-xl-3">
<label class="form-label">Jenis Kelamin <span class="text-danger">*</span></label>
<br>
<?php
if ($data['jenis_kelamin'] == 'Laki-laki') { ?>
<div class="form-check form-check-inline">
<input type="radio" id="laki_laki" name="jenis_kelamin" class="form-check-input" value="Laki-laki" checked required>
<label class="form-check-label" for="laki_laki">Laki-laki</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="perempuan" name="jenis_kelamin" class="form-check-input" value="Perempuan" required>
<label class="form-check-label" for="perempuan">Perempuan</label>
<div class="invalid-feedback invalid-feedback-inline">Pilih salah satu jenis kelamin.</div>
</div>
<?php
} else { ?>
<div class="form-check form-check-inline">
<input type="radio" id="laki_laki" name="jenis_kelamin" class="form-check-input" value="Laki-laki" required>
<label class="form-check-label" for="laki_laki">Laki-laki</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="perempuan" name="jenis_kelamin" class="form-check-input" value="Perempuan" checked required>
<label class="form-check-label" for="perempuan">Perempuan</label>
<div class="invalid-feedback invalid-feedback-inline">Pilih salah satu jenis kelamin.</div>
</div>
<?php } ?>
</div>
<div class="mb-3 pe-xl-3">
<label class="form-label">Alamat <span class="text-danger">*</span></label>
<textarea name="alamat" rows="2" class="form-control" autocomplete="off" required><?php echo $data['alamat']; ?></textarea>
<div class="invalid-feedback">Alamat tidak boleh kosong.</div>
</div>
<div class="mb-3 pe-xl-3">
<label class="form-label">Email <span class="text-danger">*</span></label>
<input type="email" name="email" class="form-control" autocomplete="off" value="<?php echo $data['email']; ?>" required>
<div class="invalid-feedback">Email tidak boleh kosong.</div>
</div>
<div class="mb-3 pe-xl-3">
<label class="form-label">WhatsApp <span class="text-danger">*</span></label>
<input type="text" name="whatsapp" class="form-control" maxlength="13" autocomplete="off" onKeyPress="return goodchars(event,'0123456789',this)" value="<?php echo $data['whatsapp']; ?>" required>
<div class="invalid-feedback">WhatsApp tidak boleh kosong.</div>
</div>
</div>
<div class="col-xl-6">
<div class="mb-3 ps-xl-3">
<label class="form-label">Foto Profil</label>
<input type="file" accept=".jpg, .jpeg, .png" id="foto" name="foto" class="form-control" autocomplete="off">
<div class="mt-4">
<img id="preview_foto" src="images/<?php echo $data['foto_profil']; ?>" class="border border-2 img-fluid rounded-4 shadow-sm" alt="Foto Profil" width="240" height="240">
</div>
<div class="form-text mt-4">
Keterangan : <br>
- Tipe file yang bisa diunggah adalah *.jpg atau *.png. <br>
- Ukuran file yang bisa diunggah maksimal 1 Mb.
</div>
</div>
</div>
</div>
<div class="pt-4 pb-2 mt-5 border-top">
<div class="d-grid gap-3 d-sm-flex justify-content-md-start pt-1">
<!-- button simpan data -->
<input type="submit" name="simpan" value="Simpan" class="btn btn-primary rounded-pill py-2 px-4">
<!-- button kembali ke halaman tampil data -->
<a href="?halaman=data" class="btn btn-secondary rounded-pill py-2 px-4">Batal</a>
</div>
</div>
</form>
</div>
<script type="text/javascript">
// validasi file dan preview file sebelum diunggah
document.getElementById('foto').onchange = function() {
// mengambil value dari file
var fileInput = document.getElementById('foto');
var filePath = fileInput.value;
var fileSize = fileInput.files[0].size;
// tentukan extension file yang diperbolehkan
var allowedExtensions = /(\.jpg|\.jpeg|\.png)$/i;
// Jika tipe file yang diunggah tidak sesuai dengan "allowedExtensions"
if (!allowedExtensions.exec(filePath)) {
alert("Tipe file tidak sesuai. Harap unggah file yang memiliki tipe *.jpg atau *.png.");
// reset input file
fileInput.value = "";
// tampilkan file default
document.getElementById("preview_foto").src = "images/img-default.png";
}
// jika ukuran file yang diunggah lebih dari 1 Mb
else if (fileSize > 1000000) {
alert("Ukuran file lebih dari 1 Mb. Harap unggah file yang memiliki ukuran maksimal 1 Mb.");
// reset input file
fileInput.value = "";
// tampilkan file default
document.getElementById("preview_foto").src = "images/img-default.png";
}
// jika file yang diunggah sudah sesuai, tampilkan preview file
else {
var reader = new FileReader();
reader.onload = function(e) {
// preview file
document.getElementById("preview_foto").src = e.target.result;
};
// membaca file sebagai data URL
reader.readAsDataURL(this.files[0]);
}
};
</script>