WBDSGNR - Real Life Implement

Thursday, 8 January 2026

Tembus Gmail dengan TXT record

Type: TXT

Name: @ / domainname.com

Loadtime : 14400

Value: v=spf1 a mx ip4:SERVER_IP include:netkl.org ~all

Monday, 10 November 2025

Translate manually Wordpress

add_filter( 'gettext', function( $translated, $original, $domain ) {

// Senarai penggantian (case-insensitive)

$map = array(

'Raised' => 'kutipan',

'Goal' => 'sasaran',

'Million' => 'juta',

);

// Guna str_ireplace untuk case-insensitive replace pada teks yang telah diterjemah

$translated = str_ireplace( array_keys( $map ), array_values( $map ), $translated );

return $translated;

}, 20, 3 );

Sunday, 26 October 2025

Cara-Cara Untuk Bypass/Solve: Database Problem.

Warning: Attempt to read property "post_status" on null in /home/xxx/public_html/wp-admin/includes/template.php on line 2298

Warning: Attempt to read property "post_status" on null in /home/xxxx/public_html/wp-admin/includes/template.php on line 2302 Warning: Attempt to read property "post_status" on null in /home/xxx/public_html/wp-admin/includes/template.php on line 2308 Warning: Attempt to read property "post_status" on null in /home/xxxpublic_html/wp-admin/includes/template.php on line 2312 Warning: Attempt to read property "ID" on null in /home/xxxx/public_html/wp-admin/includes/template.php on line 2316

Cara-Cara Untuk Bypass/Solve:

1. Quick Fix - Hide Warning (Sementara)

Tambahkan dalam wp-config.php:

// Sembunyikan warning (temporary solution)
error_reporting(E_ALL & ~E_WARNING & ~E_NOTICE);
// ATAU
ini_set('display_errors','Off');

2. Fix Root Cause - Database Repair

Error ini biasanya disebabkan corrupted post data dalam database.

Langkah-langkah:

Enable Database Repair:

// Dalam wp-config.php
define('WP_ALLOW_REPAIR', true);

Pergi ke URL: yourwebsite.com/wp-admin/maint/repair.php
Klik kedua-dua butang:
- "Repair Database"
- "Optimize Database"

3. Plugin Solution

Install plugin "Health Check & Troubleshooting":

Pergi ke Plugins → Add New
Cari "Health Check"
Activate dan run troubleshooting mode

4. Manual SQL Fix (Advanced)

Jalankan query ini dalam phpMyAdmin:

-- Cari posts yang corrupted
SELECT * FROM wp_posts WHERE post_status IS NULL OR post_title IS NULL;

-- Delete posts yang corrupted (HATI-HATI!)
DELETE FROM wp_posts WHERE post_status IS NULL;

5. Disable Problematic Plugin/Theme

// Dalam wp-config.php - disable plugins
define('WP_DISABLE_FATAL_ERROR_HANDLER', true);

// ATAU rename folder plugins via cPanel/FTP
// wp-content/plugins → wp-content/plugins-deactivate

6. Custom Code Fix (Permanent)

Tambahkan dalam functions.php theme anda:

// Fix untuk null post object
add_action('wp_loaded', 'fix_null_post_errors');
function fix_null_post_errors() {
    if (is_admin() && !defined('DOING_AJAX')) {
        // Clear corrupted post cache
        wp_cache_flush();
    }
}

Recommen

Friday, 26 September 2025

Chatbot Telegram development

🔹 FLOW BOT (berdasarkan code kau)

1. Update masuk dari Telegram

Bot terima JSON dari php://input.
Extract:
- chat_id
- firstname
- text
- (juga handle kalau update datang dari callback_query).

2. Handle Special Case

User baru join group
- Bot hantar mesej welcome dalam group.
- Bot juga cuba hantar DM private welcome.
Lead Capture Check
- Panggil handleLeadCapture() (daripada lead-capture.php).
- Kalau match keyword dari Sheet tab Redirect, terus masuk flow lead capture.

3. Session Handler

Session user disimpan dalam sessions.json.
Ada check:
- active / not active
- last_activity
- mode → exact atau contains
- Timeout → 5 minit (kalau lebih, sesi auto tamat).

4. Commands

/start
- Kalau ada param → terus treat param tu sebagai keyword.
- Kalau tiada param → bagi menu default (butang "Cek Kekosongan").
/end
- Tamatkan sesi user.
/stat
- Hantar statistik: total chat, private, group.
/notifythem (admin only)
- Masuk mode broadcast → mesej seterusnya akan dihantar kepada semua user.
/endgroupall
- Clear semua sesi group dari sessions.json.

5. Greeting / Activate

Kalau user taip keyword tertentu:
- mula, husna, /husna → mode exact (jawapan direct ikut keyword penuh).
- hai, salam, hello, carian, /carian → mode contains (lebih fleksibel, keyword mengandungi perkataan).

6. Search Flow (processSearch)

Ambil data dari Google Sheet (tab default Sheet1).
Normalise keywords.
Bandingkan dengan input user:
- Kalau match → kumpul semua row.
- Kalau tak match → reply fallback “tak ada jawapan, sila ke menu/live admin”.
Kalau match:
- Gantikan {firstname} dalam mesej reply.
- Kalau row ada gambar (col 5) → hantar photo message.
- Kalau ada butang (col 3 & 4) → buat inline keyboard.
- Kalau banyak result → tambah butang Ke Menu.

7. Lead Capture Flow (handleLeadCapture)

Step 0: Keyword trigger → bot tanya nak confirm → user perlu /start.
Step 1: Bot minta nama.
Step 2: Bot minta nombor WhatsApp → validate format.
Step 3:
- Simpan ke Google Sheet tab Leads (nama, phone, prefix).
- Hantar mesej “thank you” custom dari sheet Redirect.
- Notify admin dengan mesej + link wasap follow-up.
- Reset sesi lead capture.

8. Callback Query Handling

Kalau callback dari group:
- Kalau bukan admin → suruh user buka DM.
- Tukar channel ke private DM.
- Pastikan session aktif.
Kalau callback dalam DM:
- Cuba handle lead capture dulu.
- Kalau bukan → fallback ke search.

9. Admin Features

Hanya user ID dalam array isAdmin() yang dapat akses:
- /notifythem (broadcast ke semua user).
- /endgroupall.

🔹 Ringkas (High-Level Journey)

User masuk / start → Bot greet / bagi menu.
User tanya keyword → Bot cari dalam Sheet → reply + button/gambar.
Kalau trigger lead → Masuk flow capture data (nama, phone).
Data lead → Save ke Sheet → Notify admin.
Admin boleh broadcast / clear session bila perlu.
Sesi auto tamat kalau idle > 5 minit.

Tuesday, 2 September 2025

Submit RSSa

rssing.com

Monday, 25 August 2025

CARA NAK DAPATKAN TELEGRAM GROUP ID

api.telegram.org/bot<token>/getUpdates

Saturday, 23 August 2025

check laptop performance using powershell

POWERSHELL

get-ciminstance win32_winsat

Friday, 1 August 2025

debug VISUAL STUDIO CODE Error Fetch Extensions

Press Windows + S, search for "Environment Variables", and select:

👉 "Edit the system environment variables"

Click the Environment Variables button at the bottom.

Under User variables for USERNAME(OF YOUR WINDOWS):

Select Path
Click Edit
Click New
Paste the following path:

C:\Users\USERNAME\AppData\Local\Programs\Microsoft VS Code\bin

Click OK on all windows to apply.

Restart Terminal / VS Code

Close Command Prompt, PowerShell, or VS Code, and reopen them.

Now try:

code --version

If the version number appears, it means the code command is now available in the terminal.

Tuesday, 15 July 2025

SEO: Trik Terbaik

Lebih 30 Trik Carian Google untuk SEO GraphicLab

Gunakan kombinasi carian ini untuk:

Mengesan sebutan jenama
Mencari peluang backlink
Menjana idea kandungan
Mengkaji pesaing dalam niche

🔍 Pantau Sebutan Jenama

"graphiclab.my" -site:graphiclab.my

"GraphicLab" -site:graphiclab.my

"graphiclab" -site:graphiclab.my -site:facebook.com

🎯 Kaji Pesaing dan Kandungan Mereka

site:somecompetitor.com

site:somecompetitor.com inurl:blog

site:somecompetitor.com intitle:services

site:somecompetitor.com intitle:pricing

🧲 Cari Peluang Backlink & Outreach

"submit your site" + "web design"

"add your link" + "comic malaysia"

"directory" + "graphic design" + "malaysia"

"guest post" + "branding"

"write for us" + "digital marketing"

"become a contributor" + "creative"

💡 Idea Kandungan Blog / Keyword Research

"how to" + "graphic design"

"why you need" + "a website"

"benefits of" + "brand identity"

"best tools for" + "comic creation"

"top 10" + "web design tips"

📋 Cari Forum, Blog & Komuniti Berkaitan

inurl:forum + "graphic design"

inurl:community + "web design"

inurl:threads + "logo design"

site:quora.com "how to start a comic"

🧱 Cari Blogspot, Wordpress, dan Blog Personal

inurl:.blogspot.com + "web design"

inurl:.wordpress.com + "branding"

inurl:blog + "malaysian comic"

🔧 Operator Advanced (intitle, inurl, intext)

intitle:"graphic design tips"

inurl:portfolio + "branding"

intext:"hire me" + "comic artist"

🕒 Filter Mengikut Tarikh atau Negara

"graphic design malaysia" after:2023-01-01

"buy comic online" site:.my

🎁 Kombinasi Carian Advance

"graphic design malaysia" -site:graphiclab.my inurl:blog after:2023-01-01

intitle:"top comic websites" -site:graphiclab.my inurl:blog

"comic for sale" OR "digital comic" site:.my

intitle:"freelance designer" + "malaysia"

"malaysia comic" -site:graphiclab.my intitle:"top" OR intitle:"best"

📎 Bonus Tip:

Guna Google Tools → Any Time → pilih Past Month untuk lihat hanya kandungan terkini.

"graphiclab.my" -site:graphiclab.my after:2024-01-01

Gunakan carian-carain ini secara konsisten untuk bina senarai peluang backlink, idea kandungan, dan pantauan jenama GraphicLab.

Carian Google untuk Kenal Pesaing GraphicLab

Gunakan carian di bawah dalam browser Google untuk semak siapa yang aktif dalam bidang sama dengan graphiclab.my:

Reka bentuk grafik Malaysia:
```
"graphic design malaysia"
```
Agen web design Malaysia:
```
"web design service malaysia"
```
Freelance comic artist Malaysia:
```
"freelance comic artist malaysia"
```
Branding studio Malaysia:
```
"branding studio malaysia"
```
Studio design Malaysia:
```
"creative design studio malaysia"
```
Website yang serupa dengan GraphicLab:
```
related:graphiclab.my
```

Senarai syarikat terbaik (kita belum masuk?):

"top graphic design companies malaysia" -site:graphiclab.my

Senarai "best comic" tapi bukan kita:

"best malaysian comic" -site:graphiclab.my

Website pesaing tapi blog sahaja:
```
site:cloudeighty.com inurl:blog
```

Web design Malaysia — hanya blog post:

"web design malaysia" inurl:blog -site:graphiclab.my

Salin & tampal carian di atas dalam Google Search untuk lihat siapa pesaing paling hampir, siapa yang rank tinggi, dan jenis kandungan mereka.

Friday, 27 June 2025

Auto select after redirect to the contact page SELECT JAVASCRIPT

https://domain.my/contact/?startup_package=UltimateImpact

<option value="">Startup Package (if any)</option>

<option value="BrandKickstart">Brand Kickstart</option>

<option value="WebsiteSlayer">Website Slayer</option>

<option value="TrafficAssault">Traffic Assault</option>

<option value="UltimateImpact">Ultimate Impact</option>

</select>

document.addEventListener('DOMContentLoaded', function () {

const params = new URLSearchParams(window.location.search);

const selected = params.get('startup_package');

if (selected) {

const select = document.querySelector('select[name="package"]');

if (select) {

select.value = selected;

}

});

</script>

Thursday, 22 May 2025

https://jsfiddle.net/muhazastudio/sxpry723/22/

Hover overlay on card or any image

<//style>

.card {

position: relative;

width: 300px;

height: 200px;

overflow: hidden;

border-radius: 10px;

cursor: pointer;

}

.card img {

width: 100%;

height: 100%;

display: block;

}

.card .overlay {

position: absolute;

top: 10%; /*change position of circle start */

right: 0;

width: 20px;

height: 20px;

background: rgba(0, 0, 0, 0.6);

border-radius: 50%;

transform: translateY(-50%) scale(0);

transition: transform 0.6s ease-in-out;

transform-origin: right center;

z-index: 1;

}

.card:hover .overlay {

transform: translateY(-50%) scale(500); /* Big enough to cover image */

}

<//style>

</div>

example

CSS for next project

https://htmlstream.com

Monday, 7 October 2024

email mailto: pretext

<a href="mailto:designoutsourced.com+info@gmail.com?subject=Maklumat%20lanjut%20pakej&body=Hai,%20saya%20berminat%20tahu%20lebih%20lanjut%0A(send%20email%20ini)">Hantar Email</a>

Hantar Email

Friday, 23 August 2024

CSS FIT NO X SCROLLBAR THE HTML IN SCREEN EVENTHOUGH IMAGE OVERSIZE

/* Apply box-sizing to all elements */
*, *::before, *::after
{ box-sizing: border-box; }

/* Prevent horizontal scrolling */
html { margin: 0; padding: 0; overflow-x: hidden; }

Wordpress tunneling localhost

1. https://theboroer.github.io/localtunnel-www/

2. https://loca.lt/mytunnelpassword

Friday, 14 June 2024

Responsive Media Query

/* Responsive Styles */
@media (max-width: 768px) {
add ccs here
}
@media (max-width: 480px) {
add css here
}

Thursday, 25 January 2024

Woocommerce My Account Better Look

/* Change WC Acct Page Column Widths */

@media only screen and (min-width: 769px) {

.woocommerce-account .woocommerce-MyAccount-navigation {

width: 22%;

}

.woocommerce-account .woocommerce-MyAccount-content {

width: 75%;

}

/* Style WC Account Endpoint Links */

nav.woocommerce-MyAccount-navigation ul {

list-style-type: none;

padding-left: 0;

max-width:200px;

font-size: 17px;

line-height: 26px;

}

nav.woocommerce-MyAccount-navigation ul li {

padding: 8px 20px;

background-color: rgba(0,0,0,0.05);

border-bottom: 1px solid rgba(0,0,0,0.05);

}

nav.woocommerce-MyAccount-navigation ul li.is-active {

background-color: rgba(0,0,0,0.1);

}

nav.woocommerce-MyAccount-navigation ul li.is-active a {

color: rgba(0,0,0,0.8); cursor: default;

}

nav.woocommerce-MyAccount-navigation ul li.is-active:after {

content: "";

height: 0;

width: 0;

border-top: 20px solid transparent;

border-left: 14px solid rgba(0,0,0,0.1);

border-bottom: 20px solid transparent;

float: right;

margin-right: -34px;

margin-top: -7px;

}

nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover {

background-color: rgba(0,0,0,0.07);

}

nav.woocommerce-MyAccount-navigation ul li:not(.is-active):hover:after {

content: "";

height: 0;

width: 0;

border-top: 20px solid transparent;

border-left: 14px solid rgba(0,0,0,0.07);

border-bottom: 20px solid transparent;

float: right;

margin-right: -34px;

margin-top: -7px;

}

#left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul, .et-l--header ul {

list-style-type: none;

padding: 0 0 0 0;

line-height: 26px;

}

Wednesday, 6 December 2023

JS: TOGGLE HIDE + ARRAY

<style>

.ET1, .ET2, .ET3 {

display: none;

}

</style>

// Define an array of ID-class pairs

var idClassPairs = [

{ id: 'ET1', class: 'ET1' },

{ id: 'ET2', class: 'ET2' },

{ id: 'ET3', class: 'ET3' }

// Add more pairs as needed

];

// Add click event listeners dynamically based on the array

idClassPairs.forEach(function(pair) {

var triggerElement = document.getElementById(pair.id);

var hiddenElement = document.querySelector('.' + pair.class);

triggerElement.addEventListener('click', function() {

hiddenElement.classList.toggle(pair.class);

});

</script>

Friday, 27 October 2023

CSS: display grid of card 3 in a row

.product-list-container {

display: grid;

grid-template-columns: repeat(3, 1fr); /* Three cards per row */

grid-gap: 20px; /* Adjust the gap between cards as needed */

}

SVG + JAVASCRIPT + CSS : CLICK AREA, OPEN CLOSE TOGGLE CLASS ELEMENT TO SHOW CONTENT

SVG TOGGLE OPEN AREA #SVG

<style>

.toggle-path.grayarea {

fill: purple !important; /* Add !important to override any inline styles */

}

.toggle-path.grayarea:hover {

fill: green !important; /* Add !important to override any inline styles */

}

</style>

</svg>

<p>Gray Area Content</p>

</div>

<p>Gray Area Content</p>

</div>

<p>Gray Area Content</p>

</div>

<p>Blue Area Content</p>

</div>

<p>Green Area Content 1</p>

</div>

</div>

const togglePaths = document.querySelectorAll(".toggle-path");

const toggleContents = document.querySelectorAll(".toggle-content");

togglePaths.forEach((path, index) => {

path.addEventListener("click", function () {

// Hide all content elements

toggleContents.forEach((content) => {

content.style.display = "none";

});

// Show the content associated with the clicked path

const contentClass = path.getAttribute("data-content");

const contentToShow = document.querySelectorAll(.${contentClass});

if (contentToShow) {

contentToShow.forEach((content) => {

content.style.display = "block";

});

}

});

</script>

WHAT WE TRY TO DO?

WE TRY TO MAKE SVG PATH AS A BUTTON TO OPEN ELEMENT WITH CLASSES TOGGLE

Friday, 24 March 2023

Laravel Model CRUD

Step 1: Create the 'Task' model

Open your command prompt or terminal and navigate to your Laravel project's directory
Run the following command to create the 'Task' model:

arduino
php artisan make:model Task -m

This command will create a new model named 'Task' and also create a migration file for the 'tasks' table in the database.

Step 2: Define the 'tasks' table schema

Open the newly created migration file located in the 'database/migrations' directory and define the 'tasks' table schema:

php
public function up()
{
    Schema::create('tasks', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('description')->nullable();
        $table->timestamps();
    });
}

This schema will create a 'tasks' table with an auto-incrementing 'id' column, a 'title' column of type string, a 'description' column of type text and nullable, and two timestamp columns named 'created_at' and 'updated_at'.

Step 3: Run the migration

Run the following command to run the migration:


php artisan migrate

This command will create the 'tasks' table in the database.

Step 4: Define the 'Task' model attributes

Open the 'Task' model located in the 'app' directory and define the attributes that correspond to the 'tasks' table columns:

php
namespace App;

use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    protected $fillable = ['title', 'description'];
}

This model defines two attributes, 'title' and 'description', that are fillable for mass assignment.

Step 5: Create the 'Task' controller

Run the following command to create a new controller named 'TaskController':

go
php artisan make:controller TaskController --resource

This command will create a new controller named 'TaskController' with all the necessary CRUD methods.

Step 6: Implement the 'Task' controller methods

Open the 'TaskController' located in the 'app/Http/Controllers' directory and implement the following methods:

php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Task;

class TaskController extends Controller
{
    public function index()
    {
        $tasks = Task::all();
        return view('tasks.index', compact('tasks'));
    }

    public function create()
    {
        return view('tasks.create');
    }

    public function store(Request $request)
    {
        $task = new Task();
        $task->title = $request->input('title');
        $task->description = $request->input('description');
        $task->save();

        return redirect()->route('tasks.index');
    }

    public function show(Task $task)
    {
        return view('tasks.show', compact('task'));
    }

    public function edit(Task $task)
    {
        return view('tasks.edit', compact('task'));
    }

    public function update(Request $request, Task $task)
    {
        $task->title = $request->input('title');
        $task->description = $request->input('description');
        $task->save();

        return redirect()->route('tasks.index');
    }

    public function destroy(Task $task)
    {
        $task->delete();

        return redirect()->route('tasks.index');
    }
}

These methods correspond to the CRUD operations for the 'Task' model.
The 'index' method retrieves all the tasks from the database

In Laravel, the view files are usually located in the 'resources/views' directory. You can create a subdirectory inside the 'resources/views' directory with the same name as your controller to organize your views for that controller. For example, if your controller is named 'TaskController', you can create a 'tasks' subdirectory inside the 'resources/views' directory and store all the view files for the 'TaskController' in that directory.

So, for example, you can create the following view files for the 'TaskController':

'index.blade.php' located in 'resources/views/tasks/'
'create.blade.php' located in 'resources/views/tasks/'
'edit.blade.php' located in 'resources/views/tasks/'
'show.blade.php' located in 'resources/views/tasks/'

Note that you can name your view files anything you want, as long as they end with '.blade.php' and are located in the 'resources/views' directory or one of its subdirectories. Also, remember to update the view file names in the 'TaskController' methods where necessary.

example of index.blade.php

here is an example of an 'index.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>Tasks</h1>
    <a href="{{ route('tasks.create') }}" class="btn btn-primary mb-3">Create Task</a>
    <table class="table">
        <thead>
            <tr>
                <th>Title</th>
                <th>Description</th>
                <th>Created At</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($tasks as $task)
                <tr>
                    <td>{{ $task->title }}</td>
                    <td>{{ $task->description }}</td>
                    <td>{{ $task->created_at }}</td>
                    <td>
                        <a href="{{ route('tasks.show', $task) }}" class="btn btn-primary">Show</a>
                        <a href="{{ route('tasks.edit', $task) }}" class="btn btn-secondary">Edit</a>
                        <form action="{{ route('tasks.destroy', $task) }}" method="POST" class="d-inline-block">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this task?')">Delete</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

This view file displays a table of all the tasks with their title, description, and created_at date. It also includes buttons to show, edit, and delete each task, as well as a button to create a new task.

you can add the following route to your 'routes/web.php' file:

php
Route::resource('tasks', 'TaskController');

This route will create the necessary routes for the 'TaskController', including a route that points to the 'index' method.

here is an example of a 'create.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>Create Task</h1>
    <form action="{{ route('tasks.store') }}" method="POST">
        @csrf
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" name="title" id="title" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="description">Description</label>
            <textarea name="description" id="description" class="form-control" rows="5" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Create</button>
    </form>
@endsection

here is an example of a 'show.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>{{ $task->title }}</h1>
    <p>{{ $task->description }}</p>
    <p>Created At: {{ $task->created_at }}</p>
    <p>Updated At: {{ $task->updated_at }}</p>
    <a href="{{ route('tasks.edit', $task) }}" class="btn btn-secondary">Edit</a>
    <form action="{{ route('tasks.destroy', $task) }}" method="POST" class="d-inline-block">
        @csrf
        @method('DELETE')
        <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this task?')">Delete</button>
    </form>
@endsection

here is an example of an 'edit.blade.php' view file for the 'TaskController':

html
@extends('layouts.app')

@section('content')
    <h1>Edit Task</h1>
    <form action="{{ route('tasks.update', $task) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="form-group">
            <label for="title">Title</label>
            <input type="text" name="title" id="title" class="form-control" value="{{ $task->title }}" required>
        </div>
        <div class="form-group">
            <label for="description">Description</label>
            <textarea name="description" id="description" class="form-control" rows="5" required>{{ $task->description }}</textarea>
        </div>
        <button type="submit" class="btn btn-primary">Update</button>
    </form>
@endsection

This view file displays a form with fields for editing a task's title and description. It also includes an 'Update' button to submit the form.