Blog Development and Profile Management Using CodeIgniter4 (Part 5-Profile Page Setup)
Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!
Pada tahap ini, akan berfokus pada pembuatan dan pengaturan halaman profil yang memungkinkan pengguna untuk mengelola informasi pribadi mereka dengan mudah. Pada halaman ini, pengguna dapat memperbarui foto profil mereka, menambahkan atau mengedit informasi seperti about (tentang diri mereka), alamat (address), serta beberapa detail penting lainnya seperti nama lengkap, nomor handphone, dan username. Khusus untuk username, diperlukan keunikan agar tidak ada duplikasi antar pengguna. Dengan fitur-fitur ini, halaman profil menjadi lebih interaktif dan membantu pengguna menjaga data mereka tetap akurat serta relevan.
A. Persiapan Tools
- Pada aplikasi XAMPP pastikan mengaktifkan Module Apache dan MySQL dengan mengklik tombol Start
- Pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge pastikan sudah membuka url berikut: localhost/myblog-nama-kelas/public
localhost:8080 dengan metode php spark serve
- Pada VSCode pastikan sudah membuka folder project yang sudah dibuat sebelumnya
B. Langkah-langkah Pengaturan Halaman Profile
1. Persiapan View, Controller, & Route
View
- Bukalah folder app/Views
- Buatlah file baru bernama v_profile.php di dalam folder app/Views/admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file v_profile.php lalu simpan
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1><?= $header; ?></h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item active"><?= $header; ?></li>
</ol>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<!-- Profile Image -->
<div class="card card-secondary card-outline">
<div class="card-body box-profile">
<div class="text-center">
<img class="profile-user-img img-fluid"
src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png"
alt="User profile picture">
</div>
<h3 class="profile-username text-center">Your Name</h3>
<p class="text-muted text-center"><?= session()->get('username') ?></p>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
<!-- About Me Box -->
<div class="card card-secondary">
<div class="card-header">
<h3 class="card-title">About Me</h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<p class="text-muted">undifined</p>
<hr>
<strong><i class="fas fa-map-marker-alt mr-1"></i> Address</strong>
<p class="text-muted">undifined</p>
<hr>
<strong><i class="fas fa-phone-alt mr-1"></i> Phone Number</strong>
<p class="text-muted">undifined</p>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-9">
<div class="card card-secondary">
<div class="card-header">
<h3 class="card-title">Form Update Profile</h3>
</div><!-- /.card-header -->
<div class="card-body">
<div class="tab-content">
<form action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="profile_id" value="">
<div class="form-group row">
<label for="formName" class="col-sm-2 col-form-label">Full Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="formName" placeholder="Full Name" name="full_name" value="" required>
</div>
</div>
<div class="form-group row">
<label for="formUsername" class="col-sm-2 col-form-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="formUsername" placeholder="Username" name="username" value="" required>
</div>
</div>
<div class="form-group row">
<label for="formPhoto" class="col-sm-2 col-form-label">Photo Profile</label>
<div class="col-sm-10">
<div class="custom-file">
<label class="custom-file-label" for="formPhoto">Choose profile photo</label>
<input type="file" id="formPhoto" class="custom-file-input" name="profile_photo">
</div>
</div>
</div>
<div class="form-group row">
<label for="formAbout" class="col-sm-2 col-form-label">About</label>
<div class="col-sm-10">
<textarea class="form-control" id="formAbout" placeholder="About" name="about" required></textarea>
</div>
</div>
<div class="form-group row">
<label for="formAddress" class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<textarea class="form-control" id="formAddress" placeholder="Address" name="address" required></textarea>
</div>
</div>
<div class="form-group row">
<label for="formPhone" class="col-sm-2 col-form-label">Phone Number</label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="formPhone" placeholder="Phone Number" maxlength="15" name="phone_number" value="" required>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
<!-- /.tab-content -->
</div>
<!-- /.tab-content -->
</div><!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>Controller
- Bukalah folder app/Controllers
- Buatlah file baru bernama PofileController.php di dalam folder app/Controllers
- Selanjutnya isi file PofileController.php dengan paragraf script berikut lalu simpan
Route
- Bukalah folder app/Config
- Ubah file Routes.php dengan mendaftarkan url baru untuk memanggil halaman profile lalu simpan
- Selanjutnya mencoba membuka halaman profile pada Web Browser dengan mengetikan url berikut: localhost/myblog-nama-kelas/public/profile, kemudian tekan Enter
localhost:8080/blogs dengan metode php spark serve
2. Aktifasi Fungsi Form Update di Halaman User Profile
Model
- Bukalah folder app/Models
- Buatlah file baru bernama ProfileModel.php di dalam folder app/Models
- Kemudian isi file ProfileModel.php dengan paragraf script berikut lalu simpan
Controller
- Bukalah folder app/Controllers
- Ubah file PofileController.php dengan mengimpor class ProfileModel dan class UserModel di bagian atas sebelum class PofileController [1]
- Kemudian tambahkan perintah inisialisasi dari ProfileModel dan UserModel di dalam class PofileController [2]
- Selanjutnya tambahkan perintah untuk menampilkan data profile di dalam public function index() [3]
- Selanjutnya buatlah function submit() untuk memperbarui entries data, lalu simpan
View
- Bukalah folder app/Views/admin
- Ubah file v_profile.php dengan menambahkan perintah validasi error sebelum tag <form>
- Selanjutnya menambahkan perintah mengirim dan menampilkan data untuk diperbarui di dalam tag <form>
- Kemudian menambahkan perintah menampilkan data untuk ditampilkan pada banner lalu simpan
Route
- Bukalah folder app/Config
- Ubah file Routes.php dengan mendaftarkan url baru untuk memproses mengubah entries data ke dalam database dari form update profile lalu simpan
- Selanjutnya pada halaman User Profile isi data (opsional) pada kolom Full Name, Photo Profile, About, Address, dan Phone Number lalu klik tombol Submit
- Jika data profile berhasil diubah, maka pada halaman User Profile akan muncul notifikasi sukses serta menampilkan data yang sudah diperbarui di dalam Form Update Profile dan di dalam banner, dengan photo profile juga berhasil muncul pada side bar
Anisa Damayanti
a founder of december skies code, a software engineering teacher, and a lifelong learner who just tries her best at whatever she does. let's work together!
You May Also Like
Laundry Management Website (Part 8-MVC Transaksi Admin)
Laundry Management Website (Part 6-MVC Paket Admin)
