Rangkuman Praktikum Pemrograman Berbasis Web
Rangkuman Praktikum Pemrograman Berbasis Web Modul 1–6
Disusun oleh:
Nama: Noverio Darmawan AP
Nim: 221080200002
Kelompok: 1
Assalamu'alaikum Wr. Wb.
Berikut ini saya lampirkan hasil rangkuman materi dari Praktikum Pemrograman Berbasis Web satu semester ini dan menjadi salah satu syarat untuk memenuhi tugas Praktikum Pemrograman Berbasis Web. Saya merupakan Mahasiswi Universitas Muhammadiyah Sidoarjo Program Studi Informatika. Jika ingin mengetahui lebih lanjut bisa mengakses link umsida.ac.id atau fst.umsida.ac.id
POKOK BAHASAN I
HTML (Hypertext Markup Language)
A. Tujuan
Pembelajaran ini bertujuan agar mahasiswa mengenal dan memahami dasar-dasar pemrograman HTML, memahami struktur dan fitur-fitur HTML, memiliki keterampilan menulis kode-kode HTML, dan memahami proses pembuatan serta fungsi form dalam HTML.
B. Dasar Teori
HTML, atau Hypertext Markup Language, merupakan bahasa standar yang browser gunakan untuk menciptakan halaman dan dokumen web. Fungsinya tidak hanya memungkinkan pembuatan halaman web yang dapat diakses dan dibaca seperti artikel, tetapi juga berperan sebagai penghubung antara file-file dalam sebuah situs atau di dalam komputer melalui localhost, dan menghubungkan antar situs di seluruh internet. Komponen-komponen utama standar minimum elemen HTML mencakup Document Type Declaration (DTD), Head, dan Body.
Meta Dokumen
Elemen meta pada halaman web memberikan identitas dengan informasi seperti pemilik, kata kunci, tata letak, dan inisialisasi proses. Contohnya termasuk penggunaan tag seperti <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> dan <meta name="keywords" content="blog, web development, indonesia, html, css"/>. HTML5, standar terkini untuk pemrograman web berbasis HTML, menawarkan fitur baru dan kemudahan penggunaan tag HTML. Meskipun masih dalam pengembangan, banyak browser modern sudah mendukung HTML5. Tag-tag HTML versi sebelumnya masih digunakan dalam beberapa modul.
Tag-tag Dalam HTML5
Tag | Deskripsi |
<!-..-> | Mendefinisikan komentar |
<!DOCTYPE> | Mendefinisikan jenis document |
<a> | Mendefinisikan hyperlink |
<area> | Mendefinisikan area |
<article> | Mendefinisikan artikel |
<aside>* | Mendefinisikan content selain content halaman |
<audio>* | Mendefinisikan audio |
<b> | Mendefinisikan text tebal |
<body> | Mendefinisikan elemen body |
<br> | Mendefinisikan baris baru |
<button> | Mendefinisikan document button/tombol |
<canvas>* | Mendefinisikan document grafis |
<caption> | Mendefinisikan document table caption |
<col> | Mendefinisikan atribut untuk kolom table |
<colgroup> | Mendefinisikan kolom table |
<command>* | Mendefinisikan perintah tombol |
<datalist>* | Mendefinisikan dropdown list |
<dd> | Mendefinisikan definisi deskripsi |
<del> | Mendefinisikan text yang di hapus |
<details>* | Mendefinisikan suatu elemen |
<dialog>* | Mendefinisikan dialog (conversation) |
<div> | Mendefinisikan bagian dalam suatu document |
<dl> | Mendefinisikan daftar |
<dt> | Mendefinisikan istilah |
<cm> | Mendefinisikan text rapat |
<embed>* | Mendefinisikan eksternal content |
<fieldset> | Mendefinisikan fieldset |
<figure>* | Mendefinisikan isi media, dan keterangan |
<footer>* | Mendefinisikan bagian footer |
<form> | Mendefinisikan formulir |
<hl> ampai <h6> | Mendefinisikan header |
<head> | Mendefinisikan informasi tentang document |
<header>* | Mendefinisikan sebuah header untuk bagian suatu halaman |
<hgroup> * | Mendefinisikan informasi tentang bagian sebuah document |
<hr> | Mendefinisikan garis horizontal |
<html> | Mendefinisikan document html |
<i> | Mendefinisikan text italic |
<iframe> | Mendefinisikan inline sub frame |
<img> | Mendefinisikan gambar |
<input> | Mendefinisikan input |
<keygen>* | Mendefinisikan sebuah kunci yang dihasilkan dalam bentuk |
<label> | Mendefinisikan label untuk form |
<legend> | Mendefinisikan judul di fieldset |
<li> | Mendefinisikan list |
<link> | Mendefinisikan referensi sumber |
<map> | Mendefinisikan peta gambar |
<mark>* | Mendefinisikan text yang ditandai |
<menu> | Mendefinisikan daftar menu |
<meta> | Mendefinisikan meta information |
<meter>* | Mendefinisikan ukuran yang sudah di tetapkan |
<nav> | Mendefinisikan navigation link |
<noscript> | Mendefinisikan bagian noscript |
<object> | Mendefinisikan sebuah object |
<ol> | Mendefinisikan daftar angka |
<optgroup> | Mendefinisikan gup pilihan |
<option> | Mendefinisikan drop-down option |
<output>* | Mendefinisikan beberapa jenis output |
<p> | Mendefinisikan paragraph |
<pre> | Mendefinisikan text ke format awal |
<progress>* | Mendefinisikan kemajuan suatu tugas apapun |
<rp>* | Digunakan untuk menentukan apakah browser mendukung ruby |
<rt>* | Menjelaskan tentang penggunaan ruby |
<ruby>* | Mendefinisikan ruby annotations |
<script> | Mendefinisikan script |
<section>* | Mendefinisikan section |
<select> | Mendefinisikan selectable list |
<small> | Mendefinisikan text kecil |
<source>* | Mendefinisikan section |
<span> | Mendefinisikan bagian dalam sebuah document |
<strong> | Mendefinisikan text paket/tabel |
<style> | Mendefinisikan style untuk CSS |
<sub> | Mendefinisikan subscripted text lawan pangkat |
<sup> | Mendefinisikan superscripted text pangkat |
<table> | Mendefinisikan table |
<tbody> | Mendefinisikan table body |
<td> | Mendefinisikan table cell |
<textarea> | Mendefinisikan text area |
<tfoot> | Mendefinisikan table footer |
<th> | Mendefinisikan table header |
<thead> | Mendefinisikan table header |
<time>* | Mendefinisikan date/time |
<title> | Mendefinisikan judul dokumen |
<tr> | Mendefinisikan baris table |
<ul> | Mendefinisikan daftar |
<video>* | Mendefinisikan video |
POKOK BAHASAN II
CSS (Cascading Style Sheet)
A. Tujuan
Pembelajaran ini bertujuan agar mahasiswa dapat menguasai penggunaan Cascading Style Sheets (CSS) dengan fokus pada kemampuan membuat style sheet pada dokumen HTML, memahami aturan penulisan CSS, dan memiliki keterampilan dalam membuat layout website. Hal ini memberikan dasar yang kuat untuk mahasiswa dalam mengelola penampilan dan tata letak halaman web.
B. Dasar Teori
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan komponen-komponen dalam sebuah web, memberikan struktur dan konsistensi. Berbeda dengan bahasa pemrograman, CSS mirip dengan pengaturan styles dalam aplikasi pengolahan kata, seperti Microsoft Word. Ini memungkinkan pengaturan bersama-sama untuk heading, subbab, body text, footer, images, dan style lainnya dalam beberapa berkas. CSS digunakan untuk memformat tampilan halaman web yang dibuat dengan HTML dan XHTML, mengontrol berbagai elemen seperti ukuran gambar, warna teks, table, border, hyperlink, dan spasi antar paragraph. CSS sebagai bahasa style sheet memungkinkan tampilan yang sama dengan format yang berbeda, meningkatkan fleksibilitas dan konsistensi desain halaman web.
Sejarah & Versi CSS
CSS, atau Cascading Style Sheets, mendapat namanya dari kemampuannya mengatur deklarasi style secara berurutan, membentuk hubungan ayah-anak pada setiap style. Direkomendasikan oleh W3C pada 1996, CSS menjadi standar internet. Setelah distandarisasi, Internet Explorer dan Netscape merilis browser sesuai atau mendekati standar CSS. Terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3. CSS1 berfokus pada pemformatan dokumen HTML, CSS2 untuk kebutuhan format dokumen pada printer, dan CSS3 sebagai versi terbaru yang menawarkan banyak fitur untuk desain website, seperti penentuan posisi konten, huruf font, tampilan tabel, dan dukungan untuk media tipe printer. Seiring evolusinya, CSS3 diharapkan membawa perbaikan signifikan dari versi sebelumnya.
Dalam penulisan CSS, terdapat tiga metode utama, yaitu:
1.) Inline Style Sheet: CSS ditulis langsung pada tag HTML dengan atribut style="...". Berlaku hanya untuk tag yang bersangkutan.
2.) Embedded Style Sheet: CSS didefinisikan di dalam tag <style> di atas tag <body>. Atribut-atribut CSS disebutkan di sini dan dapat digunakan oleh tag HTML yang bersangkutan.
3.) External Style Sheet: Aturan CSS dipisahkan dalam file .css terpisah dan dihubungkan ke dokumen melalui elemen head. Memberikan pemisahan yang jelas antara tata letak dan konten halaman web.
CSS memiliki tiga bagian utama dalam syntax-nya: selector, property, dan value. Selector menentukan elemen HTML yang akan diberi gaya, bisa berupa nama Id atau nama class. Property berisi aturan seperti warna, ukuran, atau margin, sementara value menggambarkan nilai dari property tersebut. Setiap pair property dan value diakhiri dengan titik koma.
Grouping memungkinkan pemilihan dan penerapan style secara efisien, sementara id selector dan class selector memberikan cara yang spesifik untuk menargetkan elemen HTML. Dan Komentar pada CSS memberikan penjelasan yang berguna dan membantu dalam pengeditan terhadap kode CSS di masa mendatang.
POKOK BAHASAN III
JAVA SCRIPT
A. Tujuan
Pembelajaran ini bertujuan untuk mengajarkan mahasiswa untuk memahami struktur dasar JavaScript, menguasai pemrograman menggunakan JavaScript, serta memahami penggunaan object dan form dalam konteks JavaScript.
B. Dasar Teori
JavaScript merupakan bahasa script yang terintegrasi dalam kode HTML dan dieksekusi di sisi klien. Dengan JavaScript, kemampuan HTML dapat diperluas, seperti melakukan validasi formulir sebelum pengiriman ke server. Pentingnya dicatat bahwa JavaScript bukan bahasa Java; keduanya berbeda dalam cara interpretasi, di mana JavaScript diinterpretasikan oleh klien sementara Java dikompilasi sebelum dieksekusi oleh klien.
JavaScript Sebagai Bahasa Berorientasi Objek
JavaScript berfungsi sebagai bahasa berorientasi objek, di mana properti merupakan atribut dari sebuah objek dan Metode dalam JavaScript adalah sekumpulan kode yang digunakan untuk melakukan tindakan terhadap objek.
JavaScript dalam HTML dapat diletakkan di dua lokasi utama, yaitu dalam bagian head atau dalam bagian body.
POKOK BAHASAN IV
PHP
A. Tujuan
Pembelajaran ini bertujuan untuk mengenalkan mahasiswa pada pemrograman PHP. Fokusnya mencakup pemahaman instalasi Apache dan PHP, serta pemahaman terhadap struktur kontrol.
B. Dasar Teori
PHP (preprocessor Hypertext) merupakan bahasa scripting yang terintegrasi dengan HTML dan berjalan di sisi server. Sintaks PHP dieksekusi sepenuhnya di server, dan hasilnya yang berupa HTML dikirimkan ke browser. Tanda <? ... ?> atau <?php ... ?> digunakan untuk membedakan perintah HTML dan PHP. PHP dapat diaplikasikan dengan berbagai jenis database seperti MySQL, PostgreSQL, Oracle, dan lainnya.
INSTALASI
Instalasi apache:
1.) Buka web xampp, download versi 7.4
2.) Setelah download lakukan instalasi
3.) Klik next sampai Finish
4.) Aktifkan Apache dan MySQL
5.) Test koneksi dengan mengetikkan: http: /localhost di Internet Explorer, Mozilla Firefox atau Google Chrome.
6.) Buat file baru di dalam folder xampp -> htdocs -> dengan nama phpinfo.php
7.) Tuliskan script pada file phpinfo.php
8.) Tes pada web dengan mengetikkan localhost/phpinfo.php
Dalam pemrograman, penandaan atau komentar pada kode program menjadi penting ketika program menjadi kompleks. Pada PHP, ada tiga cara penulisan komentar. Pertama, dengan menggunakan '/*' dan '*/' untuk komentar yang memakan banyak baris. Kedua, dengan menggunakan '//' untuk komentar singkat dalam satu baris. Terakhir, dengan menggunakan '#' yang juga dapat digunakan untuk komentar singkat dalam satu baris. Semua cara ini memberikan fleksibilitas dalam memberikan penjelasan pada kode program tanpa mempengaruhi eksekusi program itu sendiri.
Array
Array adalah variabel yang dapat menyimpan banyak data dalam satu waktu. Pendefinisian array dilakukan dengan format $nama_array = array(elemen_1, ..., elemen_n). Jumlah elemen dalam array dapat dihitung menggunakan fungsi count($nama_array).
Operator:
Dalam PHP, operator dapat digunakan untuk melakukan berbagai operasi, termasuk penjumlahan, operasi logika, dan pembanding. Selain itu, operator Logika juga dapat digunakan di PHP, antara lain, and (&&), or(||), xor, dan !.
Penulisan Karakter Khusus dengan tanda \:
(copas bentuk tabel pd laprak)
Karakter | Keterangan | Karakter | Keterangan |
\” | Tanda petik ganda | \\ | Tanda backslash |
\$ | Tanda $ | \n | Pindah baris |
\t | Tab | \x00 s.d \xFF | Heksadesimal |
Tipe Data:
Tipe data | Keterangan |
Integer | Tipe data bilangan bulat |
Double | Tipe data bilangan real |
String | Tipe data teks |
Konversi Data:
Konversi data dapat dilakukan menggunakan fungsi seperti intval, doubleval, dan strval, atau melalui teknik cast dengan mengubah tipe ekspresi yang akan dikonversi.
Menampilkan Tanggal & Waktu
Format | Keterangan |
a, A | am atau pm, AM atau PM |
d, D | hari/tanggal dalam 2 digit, hari (Sun…Sat) |
F | Nama bulan (January…December) |
g, G | Jam (1…12), jam (0…23) |
Z | Hari dari tahun (0…365) |
y, Y | Tahun dalam 2 digit, tahun dalam 4 digit |
h, H | Jam (01…12), (00…23) |
I | Menit (00…59) |
m, M | Nama bulan (01…12), nama bulan (Jan…Dec) |
S | Detik |
W | Hari (0=Sunday..6=Saturday) |
POKOK BAHASAN V
Konektivitas PHP dengan MySQL
A. Tujuan
Pembelajaran ini bertujuan untuk memahami langkah-langkah koneksi PHP dengan MySQL serta memahami perbedaan dalam pengambilan record dari database.
B. Dasar Teori
Langkah-langkah koneksi PHP-MySQL:
Langkah pertama dalam menghubungkan PHP dengan MySQL melibatkan pembukaan koneksi ke server MySQL menggunakan fungsi mysql_connect(). Fungsi ini berguna untuk melakukan uji dan koneksi ke database MySQL yang ditentukan.
Setelah berhasil terkoneksi, langkah berikutnya adalah mengambil sebuah query dari database menggunakan fungsi mysql_query(). Fungsi ini digunakan untuk mengeksekusi perintah SQL yang dapat memanipulasi database dengan efektif.
Selanjutnya, untuk mengambil record dari database, digunakan beberapa fungsi seperti mysql_fetch_array(), mysql_fetch_assoc(), dan mysql_fetch_row(). Fungsi mysql_fetch_array() digunakan untuk memproses hasil query dan memasukkannya ke dalam array asosiatif atau numeris, atau keduanya. Sedangkan mysql_fetch_assoc() menghasilkan array asosiatif, dan mysql_fetch_row() menghasilkan array numeris. Selain itu, fungsi mysql_num_rows() berguna untuk menghitung jumlah record yang ada dalam database.
Dengan demikian, langkah-langkah ini membentuk serangkaian proses yang komprehensif untuk mengelola koneksi dan pengambilan data antara PHP dan MySQL.
POKOK BAHASAN VI
Desain Web dengan jQuery Mobile
A. Tujuan
Pembelajaran ini bertujuan untuk memahami konsep jQuery Mobile, fokus pada interkoneksi antar halaman. Serta mengembangkan kemampuan dalam pembuatan aplikasi jQuery, dengan tujuan akhir mampu menampilkan hasil aplikasi pada emulator mobile.
B. Dasar Teori
jQuery Mobile merupakan sebuah framework berbasis jQuery yang mempermudah pembuatan aplikasi web untuk perangkat mobile. Meskipun ada banyak framework lain seperti Sencha, jTouch, DHTMLX Touch, dan Jo, jQuery Mobile memiliki kelebihan yang menonjol. Pertama, framework ini mendukung berbagai platform seperti Webkit (Android, iOS, Opera, Chrome), Firefox Mobile, Windows Phone, Blackberry, Bada, dan Meego. Kedua, jQuery Mobile memanfaatkan dasar jQuery yang populer, dengan penggunaan yang luas dan forum aktif, memberikan kemudahan dalam implementasi dan pemecahan masalah.
Selain itu, jQuery Mobile menyediakan beragam komponen UI widget seperti button, listview, header, elemen form, dan navigasi. Kode-kode ini dikonstruksi menggunakan jQuery dan secara aktif diperbarui oleh pengembangnya untuk mengatasi bug-bug yang mungkin muncul. Framework ini juga menawarkan banyak fitur, termasuk dukungan HTML5, navigasi link Ajax-powered, dan penggunaan sentuhan atau navigasi gesekan. Sebelum memulai praktikum Desain Web Mobile dengan jQuery Mobile, persiapan yang perlu dilakukan melibatkan file seperti jquery.mobile-1.4.5.min.css, jquery-1.11.1.min.js, jquery.mobile-1.4.5.min.js, serta folder images dan sebuah web browser.
Sekian penjelasan di atas mengenai Rangkuman Praktikum Pemrograman Berbasis Web. Semoga dapat bermanfaat, dan dengan ini kita bisa belajar banyak mengenai materi pada Semester 3. Jika ada kesalahan dalam penulisan, saya mengucapkan mohon maaf yang sebesar-besarnya.
Wassalamu'alaikum Wr. Wb.
Komentar
Posting Komentar