laman login = https://www.infinityfree.com/
laman registrasi = https://dash.infinityfree.com/register
Senin, 24 Februari 2025
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 :
Link Download : https://drive.google.com/file/d/1OLaQHppqJPuivDlhW2X5mp8woG-prMOk/view?usp=drive_link
Tata Tertib UKK RPL
- Peserta wajib hadir di Tempat Uji Kompetensi tepat waktu 07.30
WIB.
- 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.
- Sebelum melakukan Uji Kompetensi, peserta diwajibkan untuk Berdoa.
- Sebelum Uji Kompetensi, peserta wajib berbaris dan menyimak
instruksi dan aturan dari penguji
- Peserta harus memperhatikan Prosedur dan langkah kerja yang
ditentukan oleh Penguji.
- Peserta harus memperhatikan dan melaksanakan dengan sebaik-baiknya
aturan keselamatan kerja seperti memakai kaos kaki wangi dan kuku
bersih/pendek.
- Peserta wajib bekerja menurut instruksi dan pengarahan dari
Penguji, apabila mengalami masalah terkait PC atau laptop atau internet segera
laporkan kepada Penguji/ Pengawas.
- Peserta dilarang keras menggunakan HP, mengakses yutube, dan
membuka whatsaps web ketika ujian kompetensi berlangsung.
- Peserta harus menjaga ketenangan dan suasana ujian yang kondusif.
Tidak diperkenankan berbicara atau mengganggu peserta lain selama UKK
berlangsung.
- Peserta
merapihkan Sepatu diluar ruangan leb, kursi leb dan menghapus file aplikasi
jika sudah mengerjakan tugas UKK
Selasa, 11 Februari 2025
Referensi UKK RPL - Paket 2 - Aplikasi To-Do-List
1. Membuat Database dengan nama todolist
2. Membuat Table todo
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.
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)
method="POST"→ Data formulir akan dikirim menggunakan metode POST.action="todo/tambah_todolist.php"→ Data dikirim ke file PHP bernamatambah_todolist.phpdalam foldertodo/.
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
- Responsif: Bootstrap dapat menyesuaikan desain Anda untuk perangkat berbeda (desktop, tablet, smartphone).
- Mudah digunakan: Bootstrap memiliki antarmuka yang sederhana dan mudah dimengerti.
- Konsisten: Bootstrap menyediakan predesain yang konsisten pada komponen-komponen.
- Cepat: Bootstrap memungkinkan Anda untuk menciptakan desain dengan cepat tanpa perlu membuat dari awal.
Kemampuan Bootstrap
- Layout: Bootstrap menyediakan komponen-komponen layout seperti card, grid, dan modal.
- Komponen: Bootstrap memiliki komponen-komponen seperti navbar, breadcrumb, dan dropdown.
- Form: Bootstrap menyediakan komponen-komponen form seperti input, select, dan textarea.
- Media: Bootstrap memungkinkan Anda untuk menampilkan media seperti gambar dan video.
Cara Menggunakan Bootstrap
- Unduh Bootstrap: Unduh Bootstrap dari situs resmi Bootstrap.
- Inklusikan Bootstrap: Tambahkan Bootstrap ke proyek Anda dengan mengganti tautan CSS dan JavaScript Bootstrap.
- 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-fluidberikut 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
Apa itu To-Do- List Membuat Database To Do List In
Apa itu To-Do List?
To-Do List (Lagi Dilakukan) adalah sebuah list atau daftar yang berisi tugas-tugas yang perlu dikerjakan atau diselesaikan. Fungsi utama dari To-Do List adalah membantu individu atau tim untuk menjaga konsentrasi dan produktivitas dalam menjalankan tugas-tugas yang ada.
Fungsi To-Do List
Beberapa fungsi utama dari To-Do List adalah:
1. *Membantu menjaga konsentrasi**: Dengan membuat daftar tugas yang perlu dikerjakan, Anda dapat fokus pada satu hal pada satu waktu dan menghindari kesalahan-kesalahan yang dapat menyebabkan konsentrasi terganggu.
2. **Meningkatkan produktivitas**: Dengan membuat prioritas pada tugas-tugas yang perlu dikerjakan, Anda dapat meningkatkan produktivitas dan menyelesaikan tugas-tugas lebih cepat.
3. **Membantu mengingatkan**: Dengan membuat daftar tugas, Anda dapat mengingatkan diri sendiri tentang tugas-tugas yang perlu dikerjakan dan tidak lupa melakukan hal-hal penting.
4. **Mengurangi stres**: Dengan membuat daftar tugas, Anda dapat mengurangi stres dan khawatir tentang tugas-tugas yang perlu dikerjakan.
5. **Membantu memprioritaskan**: Dengan membuat daftar tugas, Anda dapat memprioritaskan tugas-tugas yang perlu dikerjakan dan fokus pada yang paling penting.
**Cara Membuat To-Do List**
Berikut adalah beberapa cara membuat To-Do List yang efektif:
1. **Tulis semua tugas**: Tulis semua tugas yang perlu dikerjakan.
2. **Prioritaskan tugas**: Prioritaskan tugas-tugas yang perlu dikerjakan berdasarkan kepentingan dan urgensi.
3. **Buat daftar tugas yang terbagi**: Buat daftar tugas yang terbagi menjadi tiga kategori: tugas yang sudah selesai, tugas yang sedang dikerjakan, dan tugas yang perlu dikerjakan.
4. **Atur tanggal dan waktu**: Atur tanggal dan waktu untuk mengerjakan tugas-tugas yang perlu dikerjakan.
5. **Periksa dan perbarui**: Periksa dan perbarui daftar tugas secara teratur untuk memastikan bahwa Anda tidak lupa melakukan tugas-tugas yang perlu dikerjakan.
Dengan menggunakan To-Do List, Anda dapat meningkatkan konsentrasi, produktivitas, dan mengurangi stres.
=========================================================
Mari kita lanjut ke pembehasan inti yaitu membuat Database:
1. instal aplikasi xampp versi 8.0 berikut linknya:
https://www.apachefriends.org/download.html
2. Start Apache dan Mysql:
Berikut Perbedaan Apache dan Xampp
XAMPP dan Apache adalah dua istilah yang sering digunakan dalam pengembangan web, namun memiliki perbedaan yang jelas dalam fungsi dan kegunaan mereka. Berikut adalah penjelasan mengenai perbedaan keduanya:
### 1. **Definisi**
- **Apache**:
- Apache (Apache HTTP Server) adalah server web open-source yang berfungsi untuk menerima dan merespons permintaan HTTP dari klien (seperti browser). Apache merupakan salah satu server web paling populer dan digunakan untuk menyajikan konten web di internet.
- **XAMPP**:
- XAMPP adalah paket software yang mencakup beberapa komponen, termasuk Apache, MySQL (atau MariaDB), PHP, dan Perl. XAMPP dirancang untuk menjadi solusi pengembangan yang mudah digunakan, memungkinkan pengguna untuk menginstal dan mengkonfigurasi semua komponen yang diperlukan untuk menjalankan aplikasi web secara lokal di komputer mereka.
### 2. **Fungsi**
- **Apache**:
- Fungsinya adalah sebagai server web yang menyajikan konten kepada pengguna melalui internet atau intranet. Apache mengelola permintaan dari klien dan mengembalikan halaman web, file, dan sumber daya lain yang diminta.
- **XAMPP**:
- Fungsi utama XAMPP adalah untuk menyediakan lingkungan pengembangan lokal yang menyeluruh. Dengan XAMPP, pengguna dapat dengan mudah menginstal dan menjalankan server web Apache, database MySQL, dan bahasa pemrograman PHP secara bersamaan tanpa perlu konfigurasi yang rumit.
### 3. **Penggunaan**
- **Apache**:
- Digunakan secara luas di server hosting untuk menyajikan website ke publik. Cocok untuk penggunaan di server produksi.
- **XAMPP**:
- Umumnya digunakan oleh pengembang untuk tujuan pengembangan dan pengujian aplikasi web secara lokal. Sangat ideal bagi pemula yang ingin belajar tentang pengembangan web.
### 4. **Komponen**
- **Apache**:
- Hanya merupakan satu komponen yaitu server web.
- **XAMPP**:
- Merupakan paket yang terdiri dari beberapa komponen:
- Apache: Server web
- MySQL/MariaDB: Database management system
- PHP: Bahasa pemrograman server-side
- Perl: Bahasa pemrograman (opsional)
### Singkatnya:
- **Apache** adalah server web yang dapat digunakan secara independen untuk menyajikan aplikasi web, sementara **XAMPP** adalah paket yang merupakan solusi all-in-one untuk membantu pengembang menciptakan dan menguji aplikasi web di lingkungan lokal sebelum disebarkan ke server yang menggunakan Apache atau server lainnya.
Langganan:
Postingan (Atom)
-
Apa itu To-Do List? To-Do List (Lagi Dilakukan) adalah sebuah list atau daftar yang berisi tugas-tugas yang perlu dikerjakan atau diselesaik... -
Pengertian Aplikasi Kasir Aplikasi kasir adalah perangkat lunak yang dirancang untuk membantu proses transaksi pembayaran di toko atau bisni...
