Daftar Materi
1. JavaScript Dasar
Variabel dan Tipe Data
JavaScript adalah bahasa pemrograman yang dynamic typing, artinya tipe data ditentukan secara otomatis.
// Deklarasi Variabel
let nama = "Ahmad"; // String
const umur = 25; // Number
var isAktif = true; // Boolean
let hobi = ["coding", "music"]; // Array
let user = { // Object
nama: "Ahmad",
umur: 25,
email: "ahmad@email.com"
};
// Menampilkan output
console.log("Nama:", nama);
document.getElementById("output").innerHTML = nama;Demo Interaktif: Variabel
Struktur Kontrol
Percabangan (if/else)
let nilai = 85;
if (nilai >= 90) {
console.log("A");
} else if (nilai >= 80) {
console.log("B");
} else if (nilai >= 70) {
console.log("C");
} else {
console.log("D");
}Perulangan (for/while)
// For loop
for (let i = 1; i <= 5; i++) {
console.log("Angka: " + i);
}
// While loop
let j = 1;
while (j <= 5) {
console.log("While: " + j);
j++;
}Function dan Event DOM
// Deklarasi Function
function sapa(nama) {
return "Halo, " + nama + "!";
}
// Arrow Function (ES6)
const tambah = (a, b) => a + b;
// Event Handler
document.getElementById("tombol").addEventListener("click", function() {
alert("Tombol diklik!");
});
// DOM Manipulation
function ubahTeks() {
document.getElementById("judul").textContent = "Teks Berubah!";
document.getElementById("judul").style.color = "red";
}Demo: Event Handler
Judul Original
2. PHP Fundamental
Sintaks Dasar PHP
PHP (PHP: Hypertext Preprocessor) adalah bahasa server-side untuk pengembangan web dinamis.
<?php
// Variabel di PHP
$nama = "Ahmad Muyassar";
$umur = 25;
$isAktif = true;
$hobi = array("coding", "reading", "traveling");
// Output
echo "Nama: " . $nama . "<br>";
echo "Umur: " . $umur . " tahun<br>";
// Conditional
if ($umur >= 18) {
echo "Dewasa";
} else {
echo "Remaja";
}
// Loop
for ($i = 1; $i <= 5; $i++) {
echo "Angka: " . $i . "<br>";
}
?>Pengolahan Form dengan $_GET dan $_POST
Form HTML
<form method="POST" action="proses.php">
<input type="text" name="nama"
placeholder="Nama" required>
<input type="email" name="email"
placeholder="Email" required>
<textarea name="pesan"
placeholder="Pesan"></textarea>
<button type="submit">Kirim</button>
</form>Proses PHP
<?php
if ($_POST) {
$nama = $_POST['nama'];
$email = $_POST['email'];
$pesan = $_POST['pesan'];
// Validasi
if (!empty($nama) && !empty($email)) {
echo "Terima kasih " . $nama;
echo "<br>Email: " . $email;
// Simpan ke file/database
$data = $nama . "," . $email . "\n";
file_put_contents("data.txt", $data, FILE_APPEND);
}
}
?>Validasi dan Sanitasi Input
<?php
function validasiInput($data) {
// Trim whitespace
$data = trim($data);
// Remove backslashes
$data = stripslashes($data);
// Convert special characters to HTML entities
$data = htmlspecialchars($data);
return $data;
}
// Contoh penggunaan
if ($_POST) {
$nama = validasiInput($_POST['nama']);
$email = validasiInput($_POST['email']);
// Validasi email
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Format email tidak valid!";
} else {
// Proses data yang sudah valid
echo "Data valid: " . $nama . " - " . $email;
}
}
?>Tips Keamanan PHP:
- Selalu validasi dan sanitasi input dari user
- Gunakan prepared statements untuk database
- Hindari include/require dengan input user
- Set error_reporting yang sesuai untuk production
3. Multimedia & Event Handling
Manipulasi Gambar dengan JavaScript
// Mengubah src gambar
function ubahGambar() {
const img = document.getElementById('myImage');
img.src = 'gambar-baru.jpg';
img.alt = 'Gambar Baru';
}
// Image slider sederhana
let currentIndex = 0;
const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
document.getElementById('slider').src = images[currentIndex];
}
// Lazy loading image
function lazyLoad() {
const images = document.querySelectorAll('img[data-src]');
images.forEach(img => {
if (img.getBoundingClientRect().top < window.innerHeight) {
img.src = img.dataset.src;
img.removeAttribute('data-src');
}
});
}Demo: Image Gallery
Kontrol Gallery:
Kontrol Audio dan Video
// Kontrol Audio
function playAudio() {
const audio = document.getElementById('myAudio');
audio.play();
}
function pauseAudio() {
const audio = document.getElementById('myAudio');
audio.pause();
}
function setVolume(volume) {
const audio = document.getElementById('myAudio');
audio.volume = volume; // 0.0 to 1.0
}
// Kontrol Video
function playVideo() {
const video = document.getElementById('myVideo');
video.play();
}
function setVideoTime(seconds) {
const video = document.getElementById('myVideo');
video.currentTime = seconds;
}
// Event listeners untuk media
document.getElementById('myVideo').addEventListener('ended', function() {
alert('Video selesai diputar!');
});Demo: Media Player
Praktik Unit 2: Aplikasi Konversi Suhu
Tugas Praktik:
- Buat form input suhu dengan JavaScript
- Implementasi konversi Celsius ↔ Fahrenheit
- Tambah validasi input dengan PHP
- Simpan riwayat konversi
Demo: Konversi Suhu
Template Code: Konversi Suhu
// JavaScript untuk konversi suhu
function celsiusToFahrenheit(celsius) {
return (celsius * 9/5) + 32;
}
function fahrenheitToCelsius(fahrenheit) {
return (fahrenheit - 32) * 5/9;
}
function celsiusToKelvin(celsius) {
return celsius + 273.15;
}
// Validasi input
function validateTemperature(temp, unit) {
if (isNaN(temp) || temp === '') {
return false;
}
if (unit === 'celsius' && temp < -273.15) {
alert('Suhu tidak boleh kurang dari -273.15°C');
return false;
}
if (unit === 'fahrenheit' && temp < -459.67) {
alert('Suhu tidak boleh kurang dari -459.67°F');
return false;
}
return true;
}
// Simpan riwayat (localStorage)
function saveHistory(from, to, value, result) {
let history = JSON.parse(localStorage.getItem('tempHistory') || '[]');
history.push({
timestamp: new Date().toLocaleString(),
from: from,
to: to,
value: value,
result: result
});
localStorage.setItem('tempHistory', JSON.stringify(history));
}