Blog

• Menggunakan Github Classroom untuk mengumpulkan tugas

  20 Jun 2025

  menggunakan Github Classroom untuk mengupload tugas program

  Langkah-langkah:

  1. Pertama, pastikan akun github sudah login
  2. Kemudian klik link yang dikirimkan oleh dosen
  3. Ketika sudah masuk ke dalam link tersebut, klik “Authorize”
  4. Kemudian akan muncul halaman baru, lalu klik “Accept this assignment”
  5. Ketika muncul tulisan “You’re ready to go!” maka sudah berhasil, dan repository baru sudah ada
  6. Setelah itu, pada repository baru tersebut klik bagian “Code” lalu copy SSH nya
  7. Kemudian, masuk ke folder local di pc dan buka terminal dari folder tersebut dan ketik git clone git@github.com:maishazahrani/maishazahrani.github.io.git lalu klik enter
  8. Lalu, masuk dalam folder tersebut dan paste semua file yang sudah dibuat pada praktikum-praktikum sebelumnya
  9. Jika sudah maka ketik git add . git commit -m “update folder” git push
  10. Dan semua folder sudah di push kedalam repository baru tersebut.

• Menggunakan PHP untuk membuat form

  13 Jun 2025

  Membuat sebuah form pendaftaran menggunakan bahasa PHP

  Langkah-langkah:

  1. Masuk ke folder xampp/laragon/lamp stack yang kamu gunakan di device mu.
  2. Kemudian, buat sebuah folder dengan nama “latihan”
  3. Lalu buatlah file php dengan dengan nama “koneksi.php” dan isi file tersebut. Jika sudah berhasil maka lanjut ke langkah 4
  4. Kemudian masuk ke terminal/cmd yg kamu gunakan dan masuk ke folder mysql mu dengan cara: mysql -uroot -p
  5. Setelah berhasil masuk ke mysql, buat form dengan nama “latian” dengan cara: CREATE DATABASE latian;
  6. Kemudian ketik:
     • use latian; (untuk masuk ke dalam form latian)
  7. Kemudian buat table siswa dengan cara berikut: CREATE TABLE siswa( id int auto_increment primary key, nama varchar(100) alamat varchar(200), jenis_kelamin tinyint(1), agama varchar(20), sekolah_asal varchar(50));
  8. Selanjutnya, buat file baru dengan nama “create.php”, “delete.php”, “form-delete.php”, “form-edit.php”, “index.php”, “list-siswa.php”, “update.php”, “koneksi.php” dan isi kode sesuai dengan filenya.

• Melengkapi Post dan Blog

  23 May 2025

  Mengisi postingan blog menggunakan bahasa Markdown

  Mengisi postingan blog

  Langkah-langkah:

  • Buka bagian _posts pada repositori yang sudah di clone(hamizan18.github.io)
  • Tambah file yang ingin ditambahkan dengan format file .md
  • Buat nama file nya dengan format “YYYY-MM-DD”
  • Kemudian isi apapun yang ingin diisi dalam file markdown tersebut
  • Jika sudah, save file dan push ke GitHub.

• Menambahkan ke folder _students

  16 May 2025

  Belajar menambahkan ke folder _students di repository lain

  Langkah-langkah:

  • Buka repository github tujuan
  • Lalu klik “_students” pada repository tersebut
  • Kemudian klik pada bagian titik tiga diatas history commit
  • Klik “Create new file” untuk menambahkan file baru
  • Berikan nama file
  • Isi bagian “Enter file contents here” sesuai dengan format contoh
  • Kemudian klik “Commit Changes”
  • Dan berikan nama “Commit Changes” tersebut sesuai nama masing-masing
  • Dan klik “Propose changes”
  • Setelah selesai semua, klik “Create pull request”
  • Dan tunggu hingga di accept oleh owner repository tersebut.

• Belajar Menambahkan JavaScript pada Website

  25 Apr 2025

  Penjelasan mengenai Fundamental JavaScript DOM (Document Object Model)

  Apa itu JavaScript?

  JavaScript adalah bahasa pemrograman yang digunakan untuk:

  • Membuat halaman web menjadi interaktif.
  • Mengontrol perilaku elemen HTML.
  • Berkomunikasi dengan server (misalnya pakai AJAX).

  Contoh sederhana: alert(“Halo Dunia!”);

  Apa itu DOM (Document Object Model)?

  DOM adalah representasi struktur halaman HTML dalam bentuk objek JavaScript. Dengan DOM, kita bisa:

  • Mengakses dan mengubah elemen HTML/CSS.
  • Menambahkan, menghapus, atau mengganti elemen.
  • Menanggapi event seperti klik, scroll, ketik, dll.

  fungsi DOM:

  1. getElementById() Digunakan untuk mengambil elemen berdasarkan id.

  let judul = document.getElementById(“judul”);

  1. getElementsByClassName() Mengambil semua elemen yang memiliki class tertentu. Hasilnya berupa HTMLCollection (mirip array).

  let kotak = document.getElementsByClassName(“box”);

  1. getElementsByTagName() Mengambil semua elemen berdasarkan nama tag, seperti div, p, li, dll.

  let paragraf = document.getElementsByTagName(“p”);

  1. querySelector() Mengambil satu elemen pertama yang cocok dengan CSS selector. Bisa pakai id (#), class (.), atau tag.

  let tombol = document.querySelector(“.btn”);

  1. querySelectorAll() Mengambil semua elemen yang cocok dengan CSS selector. Hasilnya berupa NodeList.

  let semuaList = document.querySelectorAll(“ul li”);

  1. textContent Digunakan untuk mengubah atau mengambil isi teks dari elemen HTML.

  judul.textContent = “Teks baru!”;

  1. innerHTML Digunakan untuk mengubah atau mengambil isi HTML di dalam suatu elemen.

  kotak.innerHTML = “Berubah jadi tebal”;

  1. addEventListener() Digunakan untuk menambahkan event handler, seperti saat elemen diklik, dihover, dsb.

  tombol.addEventListener(“click”, function() { alert(“Tombol diklik!”); });

• HTML Link dan Lists

  21 Mar 2025

  Penjelasan tentang link dan lists pada HTML

  

  1. HTML Link Link (tautan) di HTML digunakan untuk menghubungkan halaman satu dengan halaman lain, atau mengarahkan ke situs eksternal. Tag yang digunakan untuk membuat link adalah . Contoh: Kunjungi Example

  Penjelasan atribut:

  • href: menentukan URL tujuan link.
  • Teks di antara tag akan muncul sebagai teks yang bisa diklik.
  • Link juga bisa menuju ke file lokal atau halaman internal website: Lihat Halaman 4
  1. HTML Lists List digunakan untuk menampilkan daftar item. Ada 3 jenis list utama: a. Unordered List (Daftar Tak Berurutan) Menggunakan tag <ul> dan <li>.
  • HTML
  • CSS
  • JavaScript

  Hasilnya berupa daftar dengan bullet point.

  b. Ordered List (Daftar Berurutan) Menggunakan tag <ol> dan <li>.

  1. Login
  2. Pilih produk
  3. Checkout

  Hasilnya berupa daftar bernomor.

  c. Description List (Daftar Deskripsi) Menggunakan tag <dl>, <dt>, dan <dd>.

  HTML

  Bahasa markup untuk membuat struktur web.

  CSS

  Digunakan untuk mengatur tampilan web.

  Kesimpulan:

  1. Link HTML digunakan untuk membuat tautan ke halaman lain atau file tertentu, dengan tag dan atribut href.
  2. List HTML digunakan untuk menampilkan daftar informasi dan terdiri dari:
     • Unordered list (<ul>): daftar dengan bullet.
     • Ordered list (<ol>): daftar dengan penomoran.
     • Description list (<dl>): daftar dengan istilah dan deskripsinya

• Belajar Buat Post

  14 Mar 2025

  Membuat postingan menggunakan bahasa markdownn

  Cara Membuat Post dengan Markdown

  Markdown adalah bahasa markup ringan yang sangat berguna untuk membuat teks yang terstruktur tanpa harus menulis HTML langsung. Misalnya:

  • → Heading besar

  • → Heading sedang

  • teks atau teks → miring
  • teks atau teks → tebal
  • atau * → daftar

  Caranya:

  1. siapkan file markdown
  2. tambahkan front matter di atas file
  3. tulis isi post dengan markdown
  4. simpan dan cek di github pages

  Kesimpulan: Markdown sangat berguna untuk membuat tulisan seperti dokumentasi, catatan, atau blog post di GitHub Pages. Dengan memahami dasar-dasarnya, kita bisa menulis lebih efisien dan rapi.

• Membuat index.html dan jekyll serve

  07 Mar 2025

  Membuat index.html dan menjalankan jekyll serve

  Menjalankan jekyll serve

  • setelah membuat sebuah repository dengan nama sendiri lalu clone repository tersebut ke local
  • kemudian masuk ke dalam folder repository tersebut dan install melalui terminal vscode dengan perintah berikut:
    • gem install jekyll bundle
    • bundle init
  • kemudian masuk ke folder Gemfile yang muncul dan tambahkan
    • gem “jekyll” di baris baru
  • tambahkan file baru dengan nama index.htmll dan isi dengan kode berikut
  • lalu ketik “jekyll build” di terminal agar menghasilkan directory _site dan jalankan “jekyll serve” dan klik url http://127.0.0.1:4000 yang muncul
  • jika web sudah berikut untuk push ke repository Github:
    • git add .
    • git commit -m “prak 2”
    • git push

• Install ruby, git, vscode dan membuat akun github

  21 Feb 2025

  Aplikasi-aplikasi yang dibutuhkan

  Beberapa aplikasi perlu diinstall, seperti:

  1. ruby
     • ruby versi 2.7.0 atau lebih tinggi
     • download ruby installer melalui ruby installer
     • ikuti form instalsi ruby installer
  2. git
     • download Git Installer melalui link Git Installer
     • pilih sesuai dengan sistem operasi yang digunakan, misal Windows
     • pada bagian Standalone Installer pilih yang 64 bit
  3. vscode
     • download VSCode Installer melalui link VSCode Installer
     • pilih sesuai dengan sistem operasi yang digunakan, misal Windows
     • pada bagian System Installer pilih yang 64 bit (x64)

  Membuat akun github:

  • Buka web github.com
  • Klik “Sign up for GitHub”
  • Masukkan email, password, username, dan country
  • Klik Continue
  • Kemudian ikuti langkah-langkah yang diminta oleh GitHub.
  • Dan pembuatan akun selesai.