Sabtu, 31 Januari 2026

Penjelasan Teori Pengambangan Aplikasi Peminjaman ALat






Berikut adalah rangkuman struktur tabel dan relasi berdasarkan skema:

1. kategori: Menyimpan kategori alat (id_kategori, nama_kategori).

2. alat: Menyimpan detail alat dan stok, terhubung ke kategori (id_alat, nama_alat, id_kategori, stok).

3. users: Menyimpan data pengguna dengan role admin, petugas, atau peminjam (id_user, username, password, role).

4. peminjaman: Tabel transaksi utama yang menghubungkan user dan alat, mencatat tanggal pinjam/kembali, status, dan denda.

Perintah SQL Utama:

• `SELECT` dengan `JOIN` untuk melihat siapa meminjam alat apa.

• `UPDATE` untuk mengubah status peminjaman dan mengelola stok.

• `INSERT` untuk menambah data master (user, alat) dan transaksi.

1. INNER JOIN (Paling Utama)

Ini adalah jenis join yang paling sering dipakai dalam kasus ini karena Anda hanya ingin menampilkan data yang memiliki hubungan pasti di kedua tabel.

  • Kegunaan: Menampilkan data peminjaman yang lengkap dengan nama user dan nama alatnya.

  • Contoh Query:

    SQL
    SELECT peminjaman.id_pinjam, users.username, alat.nama_alat, peminjaman.status
    FROM peminjaman
    INNER JOIN users ON peminjaman.id_user = users.id_user
    INNER JOIN alat ON peminjaman.id_alat = alat.id_alat;
    

    Artinya: Hanya tampilkan data peminjaman jika user dan alatnya terdaftar.

2. LEFT JOIN (Sering Digunakan untuk Laporan)

Digunakan jika Anda ingin tetap menampilkan data dari tabel "kiri" meskipun tidak ada pasangannya di tabel "kanan".

  • Kegunaan: Melihat daftar semua alat, termasuk alat yang belum pernah dipinjam sama sekali.

  • Contoh Query:

    SQL
    SELECT alat.nama_alat, peminjaman.tgl_pinjam
    FROM alat
    LEFT JOIN peminjaman ON alat.id_alat = peminjaman.id_alat;
    

    Artinya: Tampilkan semua nama alat. Jika belum pernah dipinjam, kolom tanggal pinjam akan berisi NULL.

Ringkasan Relasi Join di Gambar Anda:

  1. kategori ↔ alat: Menggunakan id_kategori sebagai penghubung.

  2. users ↔ peminjaman: Menggunakan id_user sebagai penghubung.

  3. alat ↔ peminjaman: Menggunakan id_alat sebagai penghubung.

Minggu, 18 Januari 2026

Aplikasi Peminjaman Alat

APLIKASI PEMINJAMAN ALAT UKK 2026

 1. Jalankan Database Server Mysql


2. Persiapan Dowmload Composer, Nodejs, Git dan veris php pastikan versi 8.2 keatas


3. Buat New Folder di C/Xampp/Htdoct diterminal atau cmd

4. Buat Project laravel baru

Laravel New ukk_peminjamanalat_rae
atau
composer create-project laravel/laravel ukk_peminjamanalat_rae

5. Lanjutannya jika ada pilihan pilihlah
> None
> (0) Pest
> Mysql
> Yes
NPM Install & NPM run build
cd ukk_peminjamanalat_rae
code .

masuk Terminal ketikkan: php artisan serve
jika output seperti ini, segera perbaiki


cari folder .env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database
DB_USERNAME=root
DB_PASSWORD=

✅ Clear Laravel config cache

Laravel may still be using old cached config.

php artisan config:clear php artisan cache:clear

If you’re in production:

php artisan config:cache

✅ Run migrations

Since the error references the sessions table:

php artisan migrate
yes
tampilan sementara harus seperti ini




6. Install Filament
composer require filament/filament:"^5.0"
PS C:\xampp\htdocs\ukk_peminjamanalat_rae> php artisan filament:install --panels

  What is the panel's ID? [admin]
❯ admin
7. Buat Laman Login dengan Build Filament
Jika eror ketikan di terminal php artisan tinker


membuat username dan password:
php artisan make:filament-User

8. CRUD User
php artisan make:filament-resuorce User --generate --view 
> id
Tombol Delete User: Filament>Resource>User>Tables>usersTable.php
->recordActions([
                ViewAction::make(),
                EditAction::make(),
            #deleteuser
                DeleteAction::make(),
            ])

Opsi Jika Eror Tambahkan : use Filament\Actions\DeleteAction;




9. CRUD Siswa : 
php artisan make:model major -m
php artisan make: model classroom -m
php artisan make: model student -m

buka laman database>migration>major
  public function up(): void
    {
        Schema::create('majors', function (Blueprint $table) {
            $table->id();
            $table->String('name');
            $table->String('code');
            $table->boolean('is_active')->default(true);
            $table->timestamps();
        });
    }
buka laman database>migration>classroom
public function up(): void
    {
        Schema::create('classrooms', function (Blueprint $table) {
            $table->id();
            $table->foreignId('major_id')->constrained()->cascadeOnDelete();
            $table->String('name');
            $table->integer('level');
            $table->boolean('is_active')->default(true);
            $table->timestamps();
        });
    }
buka laman database>migration>student
public function up(): void
    {
        Schema::create('students', function (Blueprint $table) {
            $table->id();
            $table->ForeignId('user_id')->constrained()->cascadeOnDelete();
            $table->ForeignId('classroom_id')->constrained()->cascadeOnDelete();
            $table->string('nisn')->unique();
            $table->string('phone_number');
            $table->enum('gende',['male','female']);
            $table->text('address')->nullable();
            $table->string('profile_picture')->nullable();
            $table->timestamps();
        });
    }

PS C:\xampp\htdocs\ukk_peminjamanalat_rae> php artisan migrate

   INFO  Running migrations.  

  2026_01_18_135846_create_majors_table ................................................ 34.07ms DONE

  2026_01_18_201608_create_classrooms_table ........................................... 183.85ms DONE

  2026_01_18_201623_create_students_table ............................................. 242.96ms DONE

PS C:\xampp\htdocs\ukk_peminjamanalat_rae> php artisan make:filament-resource Major --generate --view

 The "title attribute" is used to label each record in the UI.

 You can leave this blank if records do not have a title.

  What is the title attribute for this model?
id

   INFO  Filament resource [App\Filament\Resources\Majors\MajorResource] created successfully.  

PS C:\xampp\htdocs\ukk_peminjamanalat_rae> php artisan make:filament-resource Classroom --generate --view

 The "title attribute" is used to label each record in the UI.

 You can leave this blank if records do not have a title.

  What is the title attribute for this model?
id

   INFO  Filament resource [App\Filament\Resources\Classrooms\ClassroomResource] created successfully. 


PS C:\xampp\htdocs\ukk_peminjamanalat_rae> php artisan make:filament-resource student --generate --view
  

 The "title attribute" is used to label each record in the UI.

 You can leave this blank if records do not have a title.

  What is the title attribute for this model?
id

   INFO  Filament resource [App\Filament\Resources\Students\StudentResource] created successfully. 






Implementasi Laravel dan Filament


1. Modul Apache (Web Server)

  • Fungsi: Apache bertindak sebagai Web Server. Ia bertugas menerima permintaan dari browser (seperti saat Anda mengetik localhost/proyek-laravel) dan mengirimkan kembali tampilan website kepada Anda.

  • Port (80, 443): Ini adalah "pintu" standar untuk lalu lintas web (HTTP dan HTTPS).

2. Modul MySQL (Database Server)

  • Fungsi: Di sinilah semua data aplikasi Anda disimpan. Saat Anda menggunakan Laravel Eloquent atau membuat tabel melalui Filament, datanya akan disimpan dan dikelola oleh MySQL ini.

  • Port (3306): Ini adalah port standar yang nantinya akan Anda masukkan di file .env pada Laravel agar aplikasi bisa terhubung ke database.

3. Tombol Aksi (Actions)

  • Admin (pada MySQL): Jika diklik, ini akan membuka phpMyAdmin di browser. Di sana Anda bisa melihat tabel-tabel yang dibuat oleh migrasi Laravel secara visual.

  • Config: Digunakan untuk mengubah pengaturan teknis, misalnya jika Anda ingin mengganti versi PHP atau menaikkan batas ukuran upload file.

4. Log Window (Bagian Bawah)

  • Bagian teks putih di bawah memberikan laporan status. Teks "Status change detected: running" menandakan bahwa server Anda sudah siap digunakan tanpa error.


Mari Kita Lanjutkan untuk Projek Laravel 12 dan Filament Versi 5 dengan Study Kasus Aplikasi Peminjaman Alat.

1. Fungsi dan Kegunaan Utama

Laravel 12 (The Engine)

Fungsi utama Laravel adalah sebagai fondasi atau kerangka kerja (backend framework). Ia menangani semua hal "di balik layar" agar aplikasi berjalan aman dan terstruktur.

  • Manajemen Database: Mengatur struktur tabel dan relasi data menggunakan Eloquent ORM.

  • Keamanan (Security): Menangani proteksi dari serangan CSRF, SQL Injection, dan sistem autentikasi pengguna.

  • Routing & API: Menentukan alamat URL aplikasi dan menyediakan data untuk aplikasi mobile atau frontend modern.

  • Automasi Tugas: Menangani pengiriman email otomatis, penjadwalan tugas (cron jobs), dan antrean proses berat.

Filament (The Interface Builder)

Fungsi utama Filament adalah sebagai akselerator antarmuka (UI builder). Ia memangkas waktu pembuatan halaman admin yang biasanya memakan waktu berminggu-minggu menjadi hitungan jam.

  • CRUD Generator: Membuat form tambah data, edit, dan hapus secara instan.

  • Table Builder: Menampilkan data dalam bentuk tabel lengkap dengan fitur filter, pencarian, dan ekspor data (Excel/PDF).

  • Widget Dashboard: Membuat grafik statistik (chart) dan ringkasan data di halaman depan admin.

  • Formulir Kompleks: Menangani input rumit seperti unggah file, rich text editor, hingga pemilihan tanggal dengan validasi otomatis.


2. Bahasa dan Teknologi yang Cocok

Untuk menguasai Laravel 12 dan Filament, ada urutan teknologi yang sangat disarankan untuk dipelajari:

Bahasa Pemrograman Wajib

  • PHP (Versi 8.2 ke atas): Laravel 12 dibangun dengan PHP modern. Kamu harus memahami konsep OOP (Object Oriented Programming), Attributes, dan Type Hinting.

  • SQL: Meskipun Laravel menggunakan Eloquent, pemahaman dasar database (MySQL/PostgreSQL) sangat penting untuk merancang struktur data yang efisien.

Ekosistem Pendukung (TALL Stack)

Filament bekerja paling maksimal dalam ekosistem yang disebut TALL Stack. Jika kamu menguasai ini, pengembangan aplikasi akan terasa sangat sinkron:

  1. Tailwind CSS: Digunakan untuk kustomisasi tampilan. Filament menggunakan Tailwind secara penuh untuk desainnya yang modern.

  2. Alpine.js: Bahasa JavaScript ringan untuk memberikan interaksi di sisi klien (seperti membuka modal atau dropdown) tanpa harus menulis JS yang rumit.

  3. Laravel: Sebagai kerangka kerja inti.

  4. Livewire: Teknologi yang memungkinkan kamu membuat fitur interaktif (seperti pencarian real-time) hanya menggunakan kode PHP tanpa perlu belajar framework JS berat seperti React atau Vue.

Kamis, 08 Januari 2026

SSH New Windows

 1. setup ssh acces to hosting

2. im using windows, and laready created the ssh key, now i need to copy the key to my hosting

3. type $env:USERPROFILE\.ssh\id_ed25519.pub (untuk menambahkan ssh ke hosting)

Optional: SSH config shortcut (setelah ditambahakan ssh ke hosting)

4. i already uploaded my project to the hosting, now i need to serve it
5. right now, im on mydirectory of my project on myvps, tell me how to build and serve the app

php artisan optimize:clear

Rabu, 31 Desember 2025

nGROK APlikasi Laravel 12

NGROK DAN LARAVEL


download terlebih dahulu ngrok.com

bing.com/ck/a?!&&p=4ac5a27805945f22741ce8d06657f486154dad7b4586aace2cf564873d62a06cJmltdHM9MTc2NzEzOTIwMA&ptn=3&ver=2&hsh=4&fclid=2f1bb59c-9271-6b93-00fd-a35693836a16&psq=ngrok+download&u=a1aHR0cHM6Ly9kb3dubG9hZC5uZ3Jvay5jb20v&ntb=1

extrak aplikasi

klik ngrok.ex akan muncul seperti ini


ketik:
- ngrok
- coppy token kemudian bukan token yang diharuskan login terlebih dahulu dilaman ngrok.com
- deploy aplikasi ngrok http 8000

jika terjadi eror 

ketikkan : 

ngrok --version

npx localtunnel --port 8000



Sabtu, 13 Desember 2025

PERSIAPAN LARAVEL 12 di Windows 11

Belajar FRAMEWORK Laravel 12


1. Instal Xampp Terbaru >> Download XAMPP

2. Instal Composer >> Composer

3. Instal NodeJS >> Node.js — Download Node.js®

    Pilih Versi Sesuai pada gambar:

Setelah install semua sekarang kemudian cek versi php di comandpromt atau cmd

Ketik: php -v dan composer -v

 composer berhasil diinstall

masuk ke laman c/xampp/htdoct pilih open in terminal
kemudian ketik composer create-project laravel/laravel posapp 
note: untuk posapp itu disesuaikan dengan nama project yang akan dibuat.

Link jika mengalami kendala ikuti video tutorial ini:

ikuti langkah selanjutnya dengan mengetik:
C:\xampp\htdocs> composer create-project laravel/laravel posapp
Hasil jika berhasil
Pokoknya ditunggu aja lumayan agak lama dan harus online karena langsung menyambungkan keserver laravel


Setelah sudah open folder di vs code nama project yang kamu buat.
Pilih Terminal lalu New Terminal


dibawah terminal kalian bakal kosong ketik 
php artisan serve

Bakal otomatis keluar Link online


>
>>
>>>B E R H A S I L    S E L A M A T    M E N C O B A











4. 

Selasa, 25 November 2025

Latihan1 Javascript

 Buat File Latihan dengan nama latihanpendaftaran.html


Cek link framework bootsrap Introduction · Bootstrap v5.0

Buat Laman Body sebagai berikut:

 Cards · Bootstrap v5.0

<body>
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-7">
           
            <div class="card shadow-lg">
                <div class="card-header">
                    <h1 class="fs-4">DATA SISWA<br>SMK AL-GHIFARI BANYURESMI</h1>
                </div>
               
                <div class="card-body">
                   
                    <script>
                    // Fungsi JavaScript untuk memproses input
                    function prosesDataSiswa()
                    {
                        // Ambil nilai dari input field
                        var nisn_input = document.fform.nisn.value;
                        var nama_input = document.fform.namasiswa.value;


                        // Masukkan nilai ke output field
                        document.fform.onisn.value = nisn_input;
                        document.fform.onamasiswa.value = nama_input;
                    }
                    </script>


                    <form name="fform">
                       
                        <h5 class="mb-3 text-primary">Input Data</h5>
                       
                        <div class="mb-3 row">
                            <label for="nisn" class="col-sm-4 col-form-label">NISN</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="nisn" id="nisn" placeholder="Masukkan NISN">
                            </div>
                        </div>
                       
                        <div class="mb-3 row">
                            <label for="namasiswa" class="col-sm-4 col-form-label">NAMA LENGKAP</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="namasiswa" id="namasiswa" placeholder="Masukkan Nama Lengkap">
                            </div>
                        </div>
                       
                        <div class="mb-4">
                            <button type="button" class="btn btn-primary" onclick="prosesDataSiswa()">KIRIM</button>
                            <button type="reset" class="btn btn-secondary">ULANG</button>
                        </div>


                        <hr>
                       
                        <h5 class="mt-4 mb-3 text-success">Output Data</h5>
                       
                        <div class="mb-3 row">
                            <label for="onisn" class="col-sm-4 col-form-label">Jadi NISN adalah</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="onisn" id="onisn" disabled>
                            </div>
                        </div>
                       
                        <div class="mb-3 row">
                            <label for="onamasiswa" class="col-sm-4 col-form-label">NAMA LENGKAP Anda</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="onamasiswa" id="onamasiswa" disabled>
                            </div>
                        </div>
                       
                    </form>
                </div> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
                integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>





Penjelasan Teori Pengambangan Aplikasi Peminjaman ALat

Belajar SQL Dasar #12: JOIN (INNER, LEFT, RIGHT, FULL) — SantriKoding.com — Website Belajar Coding Bahasa Indonesia Secara Terstruktur. Beri...