Belajar HTML, CSS, Javascript, PHP

HTML

HTML (HyperText Markup Language) HTML adalah bahasa markup yang digunakan untuk membuat struktur dan mengatur konten pada halaman web. Ini adalah fondasi dari hampir setiap situs web yang ditemui di internet. Dengan HTML, dimungkinkan untuk dapat membuat tautan, gambar, tabel, formulir, dan banyak elemen lainnya yang diperlukan untuk membangun tampilan visual kepada pengguna

Contoh HTML

Belajar HTML

Ini adalah contoh HTML

Penjelasan singkat tentang kode di atas:

mendefinisikan tipe dokumen HTML. adalah elemen root dari halaman web. berisi informasi meta tentang halaman.

Nama	Alamat
Andi	Jakarta
Budi	Bandung

Kode ini akan menghasilkan tabel seperti ini Nama Alamat Andi Jakarta Budi Bandung Selain itu html juga memiliki tag untuk membuat form seperti ini

Nama Alamat Kirim

Akan menghasilkan form seperti ini * jika form tidak terlihat silahkan copy ke index.html local dan buka di browser Nama Alamat Kirim Perhatikan tag yang digunakan, tag-tag html juga memiliki atribut yang dapat digunakan untuk memberikan informasi tambahan pada tag tersebut. Contoh atribut pada tag input diatas adalah type dan name. Contoh lain atribut pada tag img

Selamat Datang!

Ini adalah paragraf pertama saya.

Perhatikan contoh kode diatas, tag img memiliki atribut src dan alt. Atribut src digunakan untuk memberikan informasi lokasi gambar yang akan ditampilkan. Atribut alt digunakan untuk memberikan informasi deskripsi gambar yang akan ditampilkan. itu adalah contoh dan fungsi dari atribut pada tag html. Atribut-atribut lain dapat dilihat sendiri pada dokumentasi html. CSS CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan presentasi halaman web. CSS memungkinkan Anda untuk membuat aturan gaya yang dapat diterapkan ke elemen-elemen HTML. Contoh CSS

Selamat Datang!

Ini adalah paragraf pertama saya.

Penjelasan singkat tentang kode di atas:

Selamat Datang!

Ini adalah paragraf pertama saya.

Contoh penggunaan id

Selamat Datang!

Ini adalah paragraf pertama saya.

Perbedaan class dan id adalah pada tag selector nya. class menggunakan titik (.) dan id menggunakan pagar (#) Javascript Javascript adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi interaktif. Contoh penggunaan javascript

Selamat Datang!

Ini adalah paragraf pertama saya.

Contoh diatas akan menampilkan popup alert ketika halaman web dibuka. Selain itu javascript digunakan untuk membuat halaman web menjadi lebih interaktif. Seperti contoh jika kita ingin menampilkan popup alert ketika tombol diklik.

Selamat Datang!

Ini adalah paragraf pertama saya.

Klik Saya Contoh diatas akan menampilkan popup alert ketika tombol diklik. Perhatikan tag button, ada atribut onclick yang berisi nama fungsi javascript. tag atribut onclick digunakan untuk menentukan fungsi javascript yang akan dijalankan ketika tombol diklik. selain tag atribut onclick, ada juga tag atribut onmouseover, onmouseout, dan lain-lain. bisa dilihat di dokumentasi dom atribut. Selain penggunaan ini javascript juga digunakan untuk mengubah isi dari halaman web. Seperti contoh jika kita ingin mengubah isi dari tag h1 ketika tombol diklik.

Judul Halaman Web

Ini adalah paragraf pertama saya.

Klik Saya Contoh diatas akan mengubah isi dari tag h1 ketika tombol diklik. Perhatikan tag h1, ada atribut id yang berisi judul. tag atribut id digunakan untuk menentukan elemen yang akan diubah. pada fungsi klik, terdapat kode document.getElementById("judul").innerHTML = "Selamat Datang!"; kode tersebut digunakan untuk mengubah isi dari elemen dengan id judul menjadi Selamat Datang!. Javascript juga dapat digunakan untuk mengubah gaya dari halaman web. Seperti contoh jika kita ingin mengubah warna dari tag h1 ketika tombol diklik.

Judul Halaman Web

Ini adalah paragraf pertama saya.

Klik Saya Contoh diatas akan mengubah warna dari tag h1 ketika tombol diklik. Perhatikan tag h1, ada atribut id yang berisi judul. tag atribut id digunakan untuk menentukan elemen yang akan diubah. pada fungsi klik, terdapat kode document.getElementById("judul").style.color = "red"; kode tersebut digunakan untuk mengubah warna dari elemen dengan id judul menjadi merah. Untuk memudahkan penggunaan javascript, biasanya javascript ditulis di file terpisah dengan ekstensi .js contoh jika ditulis di file terpisah index.html adalah seperti berikut

Judul Halaman Web

Ini adalah paragraf pertama saya.

Klik Saya script.js adalah seperti berikut function klik() { document.getElementById("judul").style.color = "red"; } Letakkan kedua file ini kedalam 1 folder dan buka index.html di browser. Dalam memudahkan fungsinya javascript diberikan library yang dapat digunakan untuk memudahkan penggunaan javascript. Salah satu library yang sering digunakan adalah JQuery. JQuery adalah library javascript yang dapat digunakan untuk memudahkan penggunaan javascript. Contoh penggunaan JQuery

Judul Halaman Web

Ini adalah paragraf pertama saya.

Klik Saya mari perhatikan kode javascript diatas. $(document).ready(function(){ $("button").click(function(){ $("#judul").css("color", "red"); }); }); kode diatas digunakan untuk mengubah warna dari tag h1 ketika tombol diklik. Perhatikan penulisan kode ini pada javascript biasa dapat di tulis seperti ini document.addEventListener("DOMContentLoaded", function(event) { var button = document.getElementById("judul"); button.addEventListener("click", function() { var judul = document.getElementById("judul"); judul.style.color = "red"; }); }); Tampak pada kode javascript biasa, penulisan kode menjadi lebih panjang dan rumit dibandingkan dengan JQuery. JQuery dapat digunakan untuk memudahkan penulisan kode javascript. tata cara penulisan JQuery adalah sebagai berikut $(selector).action() $ adalah tanda untuk menandakan bahwa ini adalah JQuery. (selector) adalah elemen yang akan diubah. .action() adalah perintah yang akan dijalankan. contoh $(document).ready(function(){}) adalah perintah untuk mengeksekusi kode javascript setelah halaman web selesai dimuat. contoh $("button").click(function(){}) adalah perintah untuk mengeksekusi kode javascript ketika tombol diklik. Contoh lain JQuery

Judul Halaman Web

Ini adalah paragraf pertama saya.

Klik Saya Contoh diatas akan mengubah warna dan isi dari tag h1 ketika tombol diklik. Perhatikan tag h1, ada atribut id yang berisi judul. tag atribut id digunakan untuk menentukan elemen yang akan diubah. pada fungsi klik, terdapat kode $("#judul").css("color", "red"); kode tersebut digunakan untuk mengubah warna dari elemen dengan id judul menjadi merah. IMPORTANT!!! Perhatikan tata letak kode javascript yang diletakkan pada head atau bawah body akan berpengaruh pada hasil. Jika kode javascript diletakkan pada head, maka kode javascript akan dieksekusi sebelum halaman web selesai dimuat. Jika kode javascript diletakkan pada bawah body, maka kode javascript akan dieksekusi setelah halaman web selesai dimuat. Contoh jika kode javascript diletakkan pada head

Judul Halaman Web

Ini adalah paragraf pertama saya.

Klik Saya Contoh jika kode javascript diletakkan pada bawah body

Judul Halaman Web

Ini adalah paragraf pertama saya.

Klik Saya Pada contoh kode diatas peletakan bawah maupun atas body tidak akan berpengaruh pada hasil. namun perlu diingat bahwa jika kode javascript diletakkan pada bawah body, maka kode javascript akan dieksekusi setelah halaman web selesai dimuat. Contoh penggunaan JQuery yang diletakkan di bawah akan berpengaruh

Judul Halaman Web

Ini adalah paragraf pertama saya.

Klik Saya Contoh diatas mengambil selector button setelah halaman web selesai dimuat. jika diletakkan pada head, maka selector button tidak akan ditemukan karena selector button belum dibuat ketika halaman web selesai dimuat. Mari perhatikan kode berikut

Hello World!

Pada kode diatas, kita mencoba mengambil elemen dengan id title. Pada kode yang diletakkan pada head, elemen dengan id title belum dibuat sehingga elemen dengan id title tidak ditemukan. Pada kode yang diletakkan pada body, elemen dengan id title sudah dibuat sehingga elemen dengan id title ditemukan. PHP (Hypertext Preprocessor) PHP adalah bahasa pemrograman yang digunakan untuk membuat halaman web menjadi lebih dinamis. Selain itu PHP juga dapat digunakan untuk mengakses database, mengirim email, dan lain-lain. PHP berjalan pada server, sehingga untuk menjalankan PHP kita membutuhkan server. contohnya adalah menggunakan XAMPP yang memiliki Apache sebagai web server dan MySQL sebagai database. XAMPP juga menyediakan PHPMyAdmin untuk mengelola database. Penulisan kode PHP Penulisan php diawali oleh tanda . Kode php dapat ditulis diantara tanda tersebut. Contoh kode PHP Contoh kode diatas akan menampilkan Hello World! pada halaman web. echo digunakan untuk menampilkan teks pada halaman web. Selain itu php echo juga dapat digunakan untuk menampilkan nilai dari variabel. Contoh diatas akan menampilkan Nama saya adalah Budi pada halaman web. $nama adalah variabel yang berisi Budi. $nama digunakan untuk mengambil nilai dari variabel nama. Ingat!!! Variabel dalam php diawali dengan tanda $. Selain itu php echo juga dapat digunakan untuk menampilkan nilai dari array. Contoh diatas akan menampilkan Nama saya adalah Budi pada halaman web. $nama adalah array yang berisi Budi, Andi, dan Joko. Selain echo, php memudahkan untuk menampilkan data dinamis pada halaman web dengan menggunakan tag html.

Contoh diatas akan menampilkan Welcome to my website pada halaman web. Serta menampilkan tanggal hari ini kedalam website. Pada contoh diatas, kita menggunakan fungsi date() untuk menampilkan tanggal hari ini. Fungsi date() adalah fungsi bawaan dari php yang digunakan untuk menampilkan tanggal dan waktu. Fungsi date() dapat menerima parameter untuk menampilkan tanggal dan waktu sesuai dengan format yang diinginkan. Contoh penggunaan fungsi date() "; echo date("Y.m.d") . "
"; echo date("Y-m-d") . "
"; echo date("l"); ?> Pada perintah echo di php dapat digunakan untuk menampilkan html Welcome to my website"; echo "

Today is " . date("Y/m/d") . "

"; ?> perhatikan kode diatas pada "Today is " . date("Y/m/d") . "

"; digunakan tanda . untuk menggabungkan string sama seperti pada javascript

Welcome to my website

Today is

Pada javascript menggunakan tanda + untuk menggabungkan string

Advanced PHP Selain hal-hal diatas php juga memiliki fitur yang cukup canggih untuk html seperti contohnya php menyediakan fitur untuk mengambil data dari form html

sediakan 2 file yaitu ( index.html atau index.php ) dan upload.php

index.html atau index.php akan berisikan kode sebagai berikut

upload.php akan berisikan kode sebagai berikut

Jika kita menjalankan kode diatas maka akan muncul form untuk mengupload file. Jika kita mengupload file maka file akan disimpan pada folder uploads. berarti sediakan juga folder uploads untuk menyimpan file yang diupload.

Penjelasan kode pada upload.php

pertama kode akan mengecek apakah ada file yang diupload melalui kode ini

if(isset($_FILES['file'])) { $_FILES adalah spesial variabel pada php yang digunakan untuk mengambil data dari form yang diupload. jika ada file yang diupload maka kode dibawahnya akan dijalankan.

$file = $_FILES['file'];

$file_name = $file['name']; $file_tmp = $file['tmp_name']; $file_size = $file['size']; $file_error = $file['error']; kode diatas digunakan untuk mengambil data file yang diupload. data yang diambil yaitu nama file, lokasi file sementara, ukuran file, dan error file.

$file_ext = explode('.', $file_name); $file_ext = strtolower(end($file_ext)); kode diatas digunakan untuk mengambil ekstensi file. explode digunakan untuk memisahkan string menjadi array. explode akan memisahkan string berdasarkan karakter yang diberikan. pada contoh diatas string akan dipisahkan menggunakan delimiter karakter titik (.) explode akan menghasilkan array yang berisi string yang dipisahkan. contoh :

perhatikan pada $allowed = array('txt', 'pdf', 'doc'); kode diatas digunakan untuk menentukan tipe file yang diizinkan untuk diupload. pada contoh diatas hanya file dengan ekstensi txt, pdf, dan doc yang diizinkan untuk diupload.

if(in_array($file_ext, $allowed)) { kode diatas digunakan untuk mengecek apakah ekstensi file yang diupload ada pada array $allowed. jika ada maka kode dibawahnya akan dijalankan.

if($file_error === 0) { kode diatas digunakan untuk mengecek apakah file yang diupload tidak error. jika tidak error maka kode dibawahnya akan dijalankan.

if($file_size <= 5242880) { // 5MB kode diatas digunakan untuk mengecek apakah ukuran file yang diupload kurang dari sama dengan 5MB. jika kurang dari sama dengan 5MB maka kode dibawahnya akan dijalankan.

$file_destination = 'uploads/' . $file_name; move_uploaded_file($file_tmp, $file_destination); echo 'File uploaded successfully!'; kode diatas digunakan untuk memindahkan file dari lokasi sementara ke lokasi tujuan. lokasi tujuan yaitu folder uploads.

move_uploaded_file merupakan fungsi bawaan php untuk memindahkan file. fungsi ini menerima 2 parameter yaitu lokasi sementara file dan lokasi tujuan file.