Jumat, 01 Agustus 2025

LATIHAN PPG - PELATIHAN MANDIRI

  1. Empati secara kognitif diperoleh melalui Resertive Learning
  2. Kemampuan individu dalam memberikan respons atau tindakan sesuai dengan perasaan/perilaku orang lain dipahami sebagai konsep ... Actionable empathy

Minggu, 02 Maret 2025

Apa itu Raeniware, Visi dan Misi RaeniWare

 

Raeniware adalah impian seorang programmer cilik yang bercita-cita untuk mengembangkan karier di bidang solusi digital. Membangun usaha di bidang ini bukanlah hal yang mudah, karena penuh dengan tantangan. Namun, bagi saya, setiap tantangan adalah peluang untuk terus belajar dan berkembang. arti dari Crafting Digital Excellence adalah Membentuk Keunggulan Digital.

Visi dan Misi RaeniWare:

Visi:

Menjadi penyedia solusi teknologi inovatif dan meningkatkan efisiensi bisnis melalui pengembangan aplikasi berkualitas.

Misi :

1. Mengembangkan solusi teknologi inovatif yang mampu meningkatkan efisiensi dan produktivitas bisnis.

2. Menciptakan aplikasi berkualitas tinggi dengan desain user-friendly dan performa optimal.

3. Memberikan layanan pengembangan yang adaptif sesuai dengan kebutuhan industri dan pelanggan.

4. Membangun ekosistem digital yang kolaboratif dengan mitra bisnis, developer, dan komunitas teknologi.

5. Terus berinovasi dalam menciptakan produk dan layanan yang memberikan dampak positif bagi pertumbuhan bisnis.




Senin, 24 Februari 2025

hosting upload aplikasi

laman login =  https://www.infinityfree.com/

laman registrasi = https://dash.infinityfree.com/register



kalkulator SMK

 


Index.html







style.css












main.js






Aplikasi Todolist Versi ke 2

 

1. Struktur Database (MySQL)

Buat database baru dengan nama todolist_db, lalu jalankan query berikut untuk membuat tabel tasks:

CREATE DATABASE todolist_db;

USE todolist_db;


CREATE TABLE tasks (

    id INT AUTO_INCREMENT PRIMARY KEY,

    task VARCHAR(255) NOT NULL,

    priority ENUM('Low', 'Medium', 'High') NOT NULL,

    due_date DATE NOT NULL,

    status ENUM('Belum Selesai', 'Selesai') NOT NULL DEFAULT 'Belum Selesai'

);



2. koneksi.php

File ini berfungsi untuk menghubungkan ke database.


3. index.php

Ini adalah halaman utama yang menampilkan daftar tugas dan memungkinkan pengguna menambahkan, mengedit, dan menghapus tugas.







4. edit.php

Halaman ini digunakan untuk mengedit task yang sudah ada.

<?php

include 'koneksi.php';


// Ambil data berdasarkan ID

$id = intval($_GET['id']);

$result = mysqli_query($koneksi, "SELECT * FROM tasks WHERE id=$id");

$row = mysqli_fetch_assoc($result);


// Update data

if (isset($_POST['update'])) {

    $task = mysqli_real_escape_string($koneksi, $_POST['task']);

    $priority = mysqli_real_escape_string($koneksi, $_POST['priority']);

    $due_date = mysqli_real_escape_string($koneksi, $_POST['due_date']);

    $status = mysqli_real_escape_string($koneksi, $_POST['status']);


    $query = "UPDATE tasks SET task='$task', priority='$priority', due_date='$due_date', status='$status' WHERE id=$id";

    mysqli_query($koneksi, $query);

    header("Location: index.php");

}

?>


<!DOCTYPE html>

<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Edit Task</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

    <div class="container mt-5">

        <h2 class="text-center">Edit Task</h2>

        

        <form method="POST">

            <input type="text" name="task" class="form-control" value="<?= htmlspecialchars($row['task']) ?>" required>


            <select name="priority" class="form-control mt-2" required>

                <option value="Low" <?= $row['priority'] == 'Low' ? 'selected' : '' ?>>Low</option>

                <option value="Medium" <?= $row['priority'] == 'Medium' ? 'selected' : '' ?>>Medium</option>

                <option value="High" <?= $row['priority'] == 'High' ? 'selected' : '' ?>>High</option>

            </select>


            <input type="date" name="due_date" class="form-control mt-2" value="<?= $row['due_date'] ?>" required>


            <select name="status" class="form-control mt-2" required>

                <option value="Belum Selesai" <?= $row['status'] == 'Belum Selesai' ? 'selected' : '' ?>>Belum Selesai</option>

                <option value="Selesai" <?= $row['status'] == 'Selesai' ? 'selected' : '' ?>>Selesai</option>

            </select>


            <button type="submit" name="update" class="btn btn-success mt-2 w-100">Update</button>

        </form>

    </div>

</body>

</html>




Sabtu, 22 Februari 2025

Jadwal dan Tata Tertib UKK RPL 2025

JADWAL UKK SMK AL-GHIFARI BANYURESMI Tahun 2025 dan TATA TERTIB UKK


Uji kompetensi adalah proses penilaian untuk menentukan tingkat keahlian seseorang terhadap suatu kompeten atau kualifikasi tertentu. Proses ini melibatkan penilaian teknis maupun teknis melali pengumpulan bukti yang relevan.

Berikut List Nama Siswa/i Jurusan RPL Angkatan 2024/2025 yang akan dilaksanakan UKK tanggal 25-26 Februari 2025 :


Tata Tertib UKK RPL

  1. Peserta wajib hadir di Tempat Uji Kompetensi tepat waktu 07.30 WIB.
  2. Peserta yang akan mengikuti Uji Kompetensi wajib mengenakan seragam praktek RPL (rapih, rambut pendek untuk laki-laki, kerudung hitam untuk perempuan) dan menggunakan Kartu Peserta Ujikom.
  3. Sebelum melakukan Uji Kompetensi, peserta diwajibkan untuk Berdoa.
  4. Sebelum Uji Kompetensi, peserta wajib berbaris dan menyimak instruksi dan aturan dari penguji
  5. Peserta harus memperhatikan Prosedur dan langkah kerja yang ditentukan oleh Penguji.
  6. Peserta harus memperhatikan dan melaksanakan dengan sebaik-baiknya aturan keselamatan kerja seperti memakai kaos kaki wangi dan kuku bersih/pendek.
  7. Peserta wajib bekerja menurut instruksi dan pengarahan dari Penguji, apabila mengalami masalah terkait PC atau laptop atau internet segera laporkan kepada Penguji/ Pengawas.
  8. Peserta dilarang keras menggunakan HP, mengakses yutube, dan membuka whatsaps web ketika ujian kompetensi berlangsung.
  9. Peserta harus menjaga ketenangan dan suasana ujian yang kondusif. Tidak diperkenankan berbicara atau mengganggu peserta lain selama UKK berlangsung.
  10. Peserta merapihkan Sepatu diluar ruangan leb, kursi leb dan menghapus file aplikasi jika sudah mengerjakan tugas UKK




Link Tata Tertib : https://drive.google.com/file/d/1Cx4zRi1X03-qzP57UNxW18ta7nl2aTg5/view?usp=drive_link

Rabu, 05 Februari 2025

CRUD To-Do-LIST

 Create - Read - Update - Delete

Menambahkan List Tugas atau Task

tambah_todolist.php

<?php

include "../config.php";

$tugas=$_POST['tugas'];

$jangkawaktu=$_POST['jangkawaktu'];

$keterangan=$_POST['keterangan'];

$sql=" insert into tbtodo (tugas,jangkawaktu,keterangan) values ('$tugas','$jangkawaktu','$keterangan')";

//echo @

mysqli_query($mysqli,$sql);

header("location:http:/todolist_rara/index.php?halaman=todo");

?>


tampilan tambah

#koding form action tambah




Membuat Halaman Todo (todo.php) Aplikasi ToDOList

 MEMBUAT FILE todo.php

1. Membuat Folder todo 

2. todo/todo.php


Mari Kita Mulai
1. Membuat Button (untuk tomboh tambah) menggunakan Framework Bootstrap 5
Kita Posisikan Sebelah Kanan
https://getbootstrap.com/docs/5.3/components/buttons/#base-class
Note: button style ="float: right;"



2. Membuat Modal Title dan Form Aktiv
Temen-temen bisa liat contoh dibawah ini untuk style bisa disesuaikan

<div class="modal" tabindex="-1">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title">Modal title</h5>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

      </div>

      <div class="modal-body">

        <p>Modal body text goes here.</p>

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Save changes</button>

      </div>

    </div>

  </div>

</div>


Penjelasan:

Struktur Modal Bootstrap

Kode tersebut menggunakan Bootstrap Modal untuk membuat jendela pop-up yang berisi formulir input.

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  • id="exampleModal" → ID modal yang digunakan untuk menampilkan atau menyembunyikan modal dengan JavaScript.
  • aria-hidden="true" → Modal ini disembunyikan secara default.
  • tabindex="-1" → Modal tidak akan mendapatkan fokus saat pertama kali dimuat.

Formulir Input (Method POST)

<form method="POST" action="todo/tambah_todolist.php">
  • method="POST" → Data formulir akan dikirim menggunakan metode POST.
  • action="todo/tambah_todolist.php" → Data dikirim ke file PHP bernama tambah_todolist.php dalam folder todo/.

Output
dilingkari Output Button dan Modal Title

3. Menambahkan Icon 
Temen-temen buka link W3School : 
https://www.w3schools.com/icons/google_icons_intro.asp
tambahkan link rel stylesheet   didalam head folder index.php

4. Membuat Table dan PHP















Selasa, 04 Februari 2025

Membuat Halaman Index.php dan Config.php Aplikasi To Do List

 Apa itu index.php?

index.php adalah file utama yang digunakan sebagai entri utama untuk aplikasi web berbasis PHP.

Fungsi

  • Menginisialisasi aplikasi
  • Menangani permintaan HTTP
  • Menghubungkan ke database
  • Menampilkan konten ke pengguna
Apa ITU PHP
PHP (Hypertext Preprocessor) adalah bahasa pemrograman yang banyak digunakan untuk pengembangan web. Berikut adalah jenis-jenis PHP yang sering digunakan:

1. **PHP Native**
   - Digunakan untuk pengembangan aplikasi web tanpa framework atau CMS. Cocok untuk proyek kecil dan sederhana.

2. **PHP Framework**
   - Framework yang populer untuk membantu pengembangan aplikasi web, termasuk:
     - **Laravel**: Dikenal karena sintaksis yang elegan dan banyak fitur built-in.
     - **CodeIgniter**: Ringan dan mudah digunakan, cocok untuk pemula.
     - **Symfony**: Framework yang kuat dengan komponen yang dapat digunakan kembali.
     - **CakePHP**: Memudahkan pengembangan aplikasi berbasis MVC.
     - **Yii**: Menawarkan performa tinggi dan banyak fitur.

3. **Content Management Systems (CMS)**
   - Platform berbasis PHP yang memudahkan pembuatan dan pengelolaan konten:
     - **WordPress**: Salah satu CMS terpopuler di dunia.
     - **Joomla**: Fleksibel dan dapat digunakan untuk berbagai jenis website.
     - **Drupal**: Cocok untuk website yang lebih kompleks dan konten yang banyak.

 4. **PHP E-commerce Platforms**
   - Digunakan untuk membangun situs e-commerce:
     - **Magento**: Solusi e-commerce yang kuat dan dapat disesuaikan.
     - **WooCommerce**: Plugin e-commerce untuk WordPress.
     - **OpenCart**: Solusi e-commerce sederhana dan mudah digunakan.

 Penemu PHP
- **Rasmus Lerdorf**: Rasmus adalah seorang programmer asal Denmark yang menciptakan PHP pada tahun 1993. Awalnya, PHP adalah singkatan dari "Personal Home Page". Seiring perkembangan waktu, PHP berkembang menjadi salah satu bahasa pemrograman yang paling populer untuk pengembangan web.

BOOTSRAPS

Bootstraps adalah salah satu framework terpopuler dalam pemrograman web menggunakan bahasa Python. Namun, jika Anda berbicara tentang framework Bootstraps, saya akan membahas tentang Bootstrap.

Bootstrap adalah sebuah framework CSS, HTML, dan JavaScript yang dapat membantu Anda menciptakan desain responsif dengan cepat dan mudah. Framework ini dikembangkan oleh Twitter dan kemudian dijadikan sebagai Open Source pada tahun 2011. Bootstrap memungkinkan Anda untuk membuat desain yang konsisten dan responsif dengan menggunakan komponen-komponen predesain yang dapat disesuaikan.

Kelebihan Bootstrap

  1. Responsif: Bootstrap dapat menyesuaikan desain Anda untuk perangkat berbeda (desktop, tablet, smartphone).
  2. Mudah digunakan: Bootstrap memiliki antarmuka yang sederhana dan mudah dimengerti.
  3. Konsisten: Bootstrap menyediakan predesain yang konsisten pada komponen-komponen.
  4. Cepat: Bootstrap memungkinkan Anda untuk menciptakan desain dengan cepat tanpa perlu membuat dari awal.

Kemampuan Bootstrap

  1. Layout: Bootstrap menyediakan komponen-komponen layout seperti card, grid, dan modal.
  2. Komponen: Bootstrap memiliki komponen-komponen seperti navbar, breadcrumb, dan dropdown.
  3. Form: Bootstrap menyediakan komponen-komponen form seperti input, select, dan textarea.
  4. Media: Bootstrap memungkinkan Anda untuk menampilkan media seperti gambar dan video.

Cara Menggunakan Bootstrap

  1. Unduh Bootstrap: Unduh Bootstrap dari situs resmi Bootstrap.
  2. Inklusikan Bootstrap: Tambahkan Bootstrap ke proyek Anda dengan mengganti tautan CSS dan JavaScript Bootstrap.
  3. Gunakan Komponen: Gunakan komponen Bootstrap dalam kode HtmL Anda.

MEMBUAT FOLDER TODOLIST

: C/XAMPP/htdoct/nama folder

pastikan membuat folder aplikasi lokal didalam folder htdoct


MEMBUAT HALAMAN index.php

setelah membuat folder temen-temen memiliki aplikasi Sublime text, Visual code atau dreamwever berikut link download aplikasinya:
https://www.sublimetext.com/download
https://code.visualstudio.com/download
http://www.oldversion.com/windows/macromedia-dreamweaver-8


selanjutnya kita akan langsung menggunakan framework bootstrap 5 
https://getbootstrap.com/docs/5.3/getting-started/introduction/


<title>To Do List</title>
<title> dalam halaman HTML digunakan untuk mendefinisikan judul dari dokumen HTML. Judul ini muncul di beberapa tempat, terutama di bagian atas jendela atau tab browser, dan juga merupakan informasi penting yang ditampilkan pada hasil pencarian mesin pencari.

<h1></h1>
digunakan untuk menandai judul tingkat pertama dalam sebuah halaman web. Elemen ini merupakan bagian dari struktur heading yang terdiri dari enam tingkat, yaitu <h1> hingga <h6>.

MARI KITA MULAI💪💪

1. Include Bootstrap’s CSS and JS.


2. components Navbar/#Nav
komponen navbar bisa diambil dilaman framework bootstrap v5 : https://getbootstrap.com/docs/5.3/components/navbar/#nav
kemudian untuk output yang diinginkan bisa disesuaikan pada gambar dibawah ini
input navbar
<div class> adalah elemen HTML yang digunakan untuk mengelompokkan konten dalam dokumen HTML. Elemen <div> sendiri adalah singkatan dari "division". Dengan menambahkan atribut class, Anda dapat memberikan identifikasi atau kategori tertentu pada div tersebut, yang dapat digunakan untuk styling dengan CSS atau untuk tujuan pengelompokan dalam JavaScript.

tampilkan output navbar seperti gambar ini:

3. Konten
container-fluid
adalah sebuah kelas CSS yang digunakan dalam framework Bootstrap untuk membuat kontainer yang fleksibel dan dapat menyesuaikan dengan ukuran layar.

berikut sourcode laman konten
<!--Content-->
    <div  class="container-fluid">
      <div class="row d-flex justify-content-center mt-3" style="min-height: 400px;">
        <div class="col-md-10 p-4 rounded-2">
           <?php
            if ($_GET['halaman']=='home') {
              include"home/home.php";
            }
            else if ($_GET['halaman']=='todo') {
              include"todo/todo.php";
            }
            else if ($_GET['halaman']=='edit_todolist') {
              include"todo/edit_todolist.php";
              echo "";
            }
            ?>
        </div>
      </div>
    </div>
   
    <!--Content-->

Membuat Database dan Menambahkan dengan MariaDB Aplikasi To Do List

 

Langkah-langkah Membuat Database dan Tabel di MySQL (MariaDB) Aplikasi To Do List

1. Masuk Ke prompt MySQL 


# cd mysql
#cd bin
#mysql -u -root

2. Menampilkan Database (show databases)

MariaDB [(none)]> show databases;
+----------------------+
| Database             |
+----------------------+
| bukutamu             |
| dbspp                |
| dbtodo_misbah        |
| galery               |
| information_schema   |
| listkegiatan         |
| mysql                |
| performance_schema   |
| phpmyadmin           |
| portofolio           |
| sql_todolist         |
| test                 |
| u8152132_rsupayangan |
| ukktodo              |
| webgalery_rany       |
+----------------------+
15 rows in set (0.467 sec)


3. Menghapus Database (Drop Database nama)

MariaDB [(none)]> drop database listkegiatan;
Query OK, 1 row affected (0.777 sec)

                                                                                                                                                                       

4. Membuat Database Baru (Create Database nama)

MariaDB [(none)]> create database ukk_todolist_raeni;
Query OK, 1 row affected (0.003 sec)

5. Menampilkan Database yang kita buat (use)

MariaDB [(none)]> use ukk_todolist_raeni;
Database changed

6. Membuat Table didalam Database ukk_todolist_raeni

MariaDB [ukk_todolist_raeni]> CREATE TABLE tbtodo (
    -> id INT(11) PRIMARY KEY AUTO_INCREMENT,
    -> tugas VARCHAR (200),
    -> jangkawaktu date,
    -> keterangan VARCHAR (20));
Query OK, 0 rows affected (0.317 sec)

tampilan GUI


Penjelasan SQL https://sl.bing.net/UfPxO5cL4C
7. Menambahkan Table todolist

Menambahkan satu data
MariaDB [ukk_todolist_raeni]> insert INTO tbtodo (tugas, jangkawaktu, Keterangan) VALUES ('Belajar Laravel', '24/12/2025','Belum Selesai');

Menambahkan dua data
MariaDB [ukk_todolist_raeni]>  insert INTO tbtodo (tugas, jangkawaktu, Keterangan) VALUES ('Belajar PWPB','24/12/2025','Belum Selesai'), ('PR PKN','02/03/2025','Belum Selesai');
Query OK, 2 rows affected, 2 warnings (0.108 sec)
Records: 2  Duplicates: 0  Warnings: 2








LATIHAN PPG - PELATIHAN MANDIRI

Empati secara kognitif diperoleh melalui Resertive Learning Kemampuan individu dalam memberikan respons atau tindakan sesuai dengan perasaan...