WBDSGNR - Real Life Implement

Tuesday, 2 September 2025

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

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

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.