Code untuk index.php
<?php include 'koneksi.php'; ?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Profil</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing:
border-box;
font-family:
'Segoe UI', sans-serif;
}
body {
background:
linear-gradient(135deg, #667eea, #764ba2);
min-height:
100vh;
display: flex;
align-items:
center;
justify-content:
center;
}
.card {
background:
white;
width: 100%;
max-width:
380px;
padding: 25px;
border-radius:
15px;
text-align:
center;
box-shadow: 0
10px 25px rgba(0,0,0,0.2);
animation:
fadeIn 0.6s ease;
}
@keyframes fadeIn
{
from {opacity:
0; transform: translateY(20px);}
to {opacity:
1; transform: translateY(0);}
}
.profile-img {
width: 140px;
height: 140px;
border-radius:
50%;
object-fit:
cover;
border: 4px
solid #eee;
margin-bottom:
15px;
}
h2 {
margin-bottom:
10px;
color: #333;
}
textarea {
width: 100%;
padding: 10px;
border-radius:
8px;
border: 1px
solid #ddd;
margin-top:
10px;
resize: none;
}
input[type="file"] {
margin-top:
10px;
}
button {
margin-top:
15px;
width: 100%;
padding: 12px;
border: none;
border-radius: 8px;
background:
#667eea;
color: white;
font-size:
16px;
cursor:
pointer;
transition:
0.3s;
}
button:hover {
background:
#5a67d8;
}
.desc {
margin-top:
10px;
font-size: 14px;
color: #666;
}
@media (max-width:
480px) {
.card {
margin:
20px;
padding:
20px;
}
}
</style>
</head>
<body>
<?php
$result = $conn->query("SELECT * FROM profiles ORDER
BY id DESC LIMIT 1");
$data = $result->fetch_assoc();
?>
<div class="card">
<h2>Arief
Budiman</h2>
<img
id="preview" class="profile-img"
src="<?php echo $data['foto'] ??
'https://via.placeholder.com/150'; ?>">
<p
class="desc">
<?php echo
$data['deskripsi'] ?? 'Halo! Ini adalah halaman profil sederhana.'; ?>
</p>
<form
action="upload.php" method="POST"
enctype="multipart/form-data">
<input
type="file" name="foto" id="uploadInput"
accept="image/*">
<textarea
name="deskripsi" rows="3" placeholder="Update
deskripsi..."></textarea>
<button
type="submit">💾 Simpan
Perubahan</button>
</form>
</div>
<script>
document.getElementById('uploadInput').onchange =
function(evt) {
const [file] =
this.files;
if (file) {
document.getElementById('preview').src = URL.createObjectURL(file);
}
};
</script>
</body>
</html>
Code untuk koneksi.php
<?php
$conn = new mysqli("localhost",
"root", "", "profil_db");
if ($conn->connect_error) {
die("Koneksi gagal: " . $conn->connect_error);
}
?>
Code untuk upload.php
<?php
include 'koneksi.php';
$deskripsi = $_POST['deskripsi'];
// Upload file
$namaFile = $_FILES['foto']['name'];
$tmp = $_FILES['foto']['tmp_name'];
$path = "uploads/" . time() .
"_" . $namaFile;
if (move_uploaded_file($tmp, $path)) {
$sql =
"INSERT INTO profiles (nama, deskripsi, foto)
VALUES ('Arief Budiman', '$deskripsi', '$path')";
if
($conn->query($sql) === TRUE) {
echo
"Data berhasil disimpan <br><a
href='index.php'>Kembali</a>";
} else {
echo
"Error: " . $conn->error;
}
} else {
echo
"Upload gagal";
}
%20(1).png)
%20(1).png)
0 Comments