RANGKUMAN PRAKTIKUM PEMROGAMAN WEB 1-6

Pokok Bahasan I

HTML (Hypertext Markup Language)

A. Dasar Teori

HTML adalah, (HyperText Markup Language) sebuah bahasa standar yang digunakan oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel.

Standar minimum elemen HTML adalah:

· Document Type Declaration (DTD)

· Head

· Body

<DTD>

<html>

<head>

<!—terdiri dari elemen-elemen yang mendeklarasikan konten sebagai pendukung lingkungan seperti title, meta dokumen, CSS, Javascript à

</head>

<body>

<!—terdiri dari elemen-elemen yang diinterpretasikan sebagai tampilan webà

</body>

</html>

· DTD

Sebagai standar versi dokumen W3C yaitu suatu deklarasi yang digunakan untuk mengidentifikasi jenis dokumen HTML yang digunakan sehingga browser dapat menentukan bagaimana memperlakukan kode tersebut.

· Meta Dokumen

Elemen meta sebagai identitas dari halaman web yang bias a terdiri dari owner, keyword, layout, ataupun inisialisasi proses seperti refresh.

Contoh:

· <meta http-equiv="Content-Type" content="text!html; charset=UTF-8" />

· <meta name="keywords" content="blog, web development, indonesia, html, css" I> • <meta name="description" content="Tentang dasar-dasar HTML" />

· Fitur Baru HTML 5

HTML5 menawarkan banyak fitur yang menarik. Berikut ini adalah beberapa fitur HTML5 yang cukup menarik.

* Tag <canvas> untuk menggambar 2D

* Tag <video> dan <audio> untuk media playback * Mendukung penyimpanan lokal

* Tag khusus, <article>, <footer>, <header>, <nav>, <section>

* Kontrol barn pada form, seperti kalender,tanggal, waktu, email, url, dan search

· Form

Formulir dibentuk dengan menggunakan pasangan tag <form> dan </form>. Ada 2 atribut yang mengikuti yaitu Action dan Method.

1. Action menentukan URL yang akan dijalankan dan menerima semua masukan pada formulir.

2. Method digunakan untuk menentukan bagaimana informasi dikirim ke URL yang disebutkan oleh Action, nilai yang sering digunakan berupa atribut GET dan POST.

- Post membuat informasi dikirimkan secara terpisah dengan url.

- Get membuat informasi dikirim menjadi satu dengan url.

Bentuk penulisan sebagai berikut:

· Tabel

Untuk membuat tabel dengan penggunakan pasangan tag <table> dan </table> yang memiliki atribut :

a. align : untuk rata kiri (left), tengah (center) dan rata kanan (right).

b. Bgcolor : warna latar belakang dari tabel.

c. Border : ukuran lebar border tabel.

d. Cellpadding : jarak antara isi sel dengan batas sel.

e. Cellspacing : untuk mengatur jarak sel (spasi dalam tabel).

f. Width : untuk mengatur lebar tabel dalam piksel.

g. Heigth : untuk mengatur tinggi tabel dalam piksel.

Kemudian diikuti dengan tag :

1. <tr> untuk membuat baris, yang terdiri dari atribut:

- align : perataan : rata kiri (left), rata tengah (center), sata kanan (right)

- vlign : perataan vertikal (top, midle, bottom)

- bgcolor : untuk warna background dari baris

2. <th> untuk membuat header tabel

3. <td> untuk membuat kolom.

- align : perataan : rata kiri (left), rata tengah (center), sata kanan (right)

- vlign : perataan vertikal (top, midle, bottom)

- colspan : untuk menggabungkan kolom

- rowspan : untuk menggabungkan baris

- width : untuk mengatur lebar tabel dalam piksel

- heigh : untuk mengatur tinggi tabel dalam piksel

- background : untuk beckground gambar

- bgcolor : background warna

Halaman yang berbasis frame dibentuk dengan menggunakan pasangan tag <frameset> dan </frameset> diikuti dengan atribut :

1. Cols untuk menentukan lebar frame.

2. Rows untuk menentukan panjang frame.

3. Border untuk mengatur ketebalan garis.

Kemudian diantara tag <frameset> dan </frameset> terdapat tag <frame> yang memiliki atribut :

1. Src=” ” untuk menampilkan document html.

2. Scrolling=”no” untuk menghilangkan batang penggulung.

3. Norezise digunakan supaya frame tidak bisa diubah ketika ditampilkan pada browser.

4. Target=” ” untuk mengarahkan ke frame mana yang akan digunakan.

Pokok Bahasan II

CSS (Cascading Style Sheet)

A. Dasar Teori

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sarna dengan format yang berbeda.

- Sejarah CSS

Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

- Versi:

Untuk saat ini terdapat tiga versi CSS, yaitu CSSl, CSS2, dan CSS3. CSSI dikembangkan berpusat pada pemformatan dokumen HTML, CSS2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer, sedangkan CSS3 adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam desain website.

- Penulisan

Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:

hl {

color: #0789de; }

- Inline Style Sheet

CSS didefmisikan lang sung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style=" ... " dalam tag HTML tersebut.

- Embedded Style Sheet

CSS didefmisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefmisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.

- External Style Sheet

Menempatkan aturan CSS secara terpisah, style sheet external terhubung dengan dokumen melalui elemen head.

- Syntax CSS

Syntax pada CSS terdiri dari tiga bag ian, yaitu selector, property dan value.

- Grouping

Contoh Script :

h1,h2,h3,h4,h5,h6[

color:green;

}

- Class Selector

Dengan menggunakan class selector, kita dapat mendefmisikan style yang berbeda untuk elemen HTML yang sarna.

syntax style untuk class adalah sebagai berikut

.namaKelas{

Property1: value1;

Property2: value2;

}

- Id Selector

Id selector didefinisikan dengan menggunakan karakter #. Berikut adalah contoh penggunaan id selector:

#green {color:green}

Aturan style dibawah ini akan diterapka pada elemen p yang menggunakan id dengan value adalah “para1”:

p#para1{

text-align:center;

color:red}

- Komentar pada CSS

Komentar digunakan untuk menjelaskan baris kode anda, sehingga dapat membantu juga suatu hari nanti Anda akan melakukan pengeditan terhadap source code. seperti contoh berikut:

/*This is a coment*/

Pokok Bahasan III

Javascript

A. Dasar Teori

Java Script adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. JavaScript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. JavaScript diinterpretasikan oleh klien (kodenya bias dilihat pada sisi klien),

Struktur JavaScript

Struktur dari JavaScript adalah sebagai berikut :

<!—

Penulisan kode javascript

//-->

</script>

JavaScript sebagai bahasa berorientasi objek

Property

Property adalah atribut dari sebuah obyek. Contoh, obyek sebuah mobil punya property warna mobil.

Penulisan :

Nama_objek.nama_properti = nilai

Window.defaultStatus = “Selamat Belajar JavaScript ya Guys”;

Metode

Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap obyek.

Penulisan :

Nama_objek.nama_metode(parameter)

Document.write = (“Hallo Viqi”)

Letak JavaScript dalam HTML

Script JavaScript dalam dokumen HTML dapat diletakkan pada :

1. Bagian Head

2. Bagian Body (jarang digunakan)

Arithmetic Operators

Operator	Description	Example	Result
+	Penjumlahan	x=2 y=2 x+y	4
-	Pengurangan	x=5 y=2 x-y	3
*	Perkalian	x=5 y=4 x*y	20
/	Pembagian	15/5 5/2	3 2.5
%	Sisa Pembagian (modulus)	5%2 10%8 10%2	1 2 0
++	Penaikan	X==5 X++	X=6
--	Penurunan	X==5 x--	X=4

Assignment Operators

Operator	Description	Example	Is The Same As
=	Pemberian Nilai	x=y	x=y
+=	Penambahan Bilangan	x+=y	x=x+y
-=	Pengurangan Bilangan	x-=y	x=x-y
*=	Pengalian Bilangan	x*=y	x=x*y
/=	Pembagian Bilangan	x/=y	x=x/y
%=	Perolehan sisa bagi	x%=y	x=x%y

Comparisson Operators

Operator	Description	Example
==	Kesamaan	5==8 return false
===	Is equel to (checks for both value and typre)	X=5 Y=”5” X==y return false X===y return false
!=	Ketidaksamaan	5!=8 return true
>	Lebih dari	5>8 return false
<	Kurang dari	5<8 return true
>=	Lebih besar atau sama dengan	5>= return false
<=	Kurang dari atau sama dengan	5<=8 return true

Logical Operators

Operator	Description	Example
&&	And	x=6 y=3 (x<10&&y>1) returns true
\|\|	Or	x=6 Y=3 (x==5 \|\| y==5) returns false
!	Not	x=6 Y=3 !(x==y) returns true

Pokok Bahasan IV

PHP

A. Dasar Teori

PHP (Preprocessor Hypertext) adalah bahasa scripting yang menyatu dengan HTML dan dijalankan pada server side. Artinya semua sintaks yang diberikan akan sepenuhnya dijalankan pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja berupa HTML. Untuk membedakan perintah HTML dan PHP digunakan tanda <? … ?>atau<?php … ?>

PHP dapat diaplikasikan dengan berbagai macam database, seperti MySQL, PostgreSQL,, Oracle, dan lannya.

Beberapa script dasar PHP

· Menampilkan text

Echo”..text…<br>”

<br> : ganti baris

· Variable

- Untuk membuat variable diberi tanda dollar ($). Variable berfungsi untuk menyimpan suatu nilai dan dapat berubah-ubah. Penulisan variable yang benar adalah :

- Karakter pertama tidak boleh berupa angka (harus berupa huruf atau garis bawah)

- Tidak mengandung spasi

- Pemakaian huruf capital dan huruf kecil dibedakan

Contoh penulisan variable :

$data, $data1, $data_ku

· Tag dalam PHP

Banyak cara untuk menyisipkan php dalam script html, ada berbagai macam bentuk tag yang dapat digunakan, antara lain :

ü Cara 1

<?php // Menandai awal tag

……..

?> // Menandai akhir tag

ü Cara 2

<? // Menandai awal tag

……..

?> // Menandai akhir tag

ü Cara 3

<% // Menandai awal tag

……..

%> // Menandai akhir tag

ü Cara 4

……...

</script> // Menandai akhir tag

Ada kalanya sebagai pemrograman, karena banyaknya kode program atau variable dalam program, perlu menandai atau memberi komentar pada program. Komentar pada program merupakan tulisan pada program yang tidak dieksekusi. Pada PHP, ada 3 macam cara penulisan:

a) /*komentar*/

Cara seperti ini sangat berguna dan efisien untuk pemberian komentar yang memakan banyak baris.

b) //komentar

Cara ini berguna untuk pemberian komentar singkat yang tak lebih dari 1 baris saja.

c) #komentar

Cara ini berguna untuk pemberian komentar singkat yang tak lebih dari 1 baris saja.

· Array

Array merupakan suatu variable yang dapat berisi banyak data dalam waktu yang sama. Untuk menghitung jumlah elemen array digunakan fungsi count(), dengan format count)$nama_array)

v Operator

Dalam PHP juga dapat melakukan prosesoperasi, baik itu penjumlahan, operasi logika, ataupun operasi pembanding.

Operator Matematika yang digunakan dalam PHP yaitu:

Operator	Fungsi	Operator	Fungsi
-	Penjumlahan	-	Pengurangan
*	Perkalian	/	Pembagian
%	Sisa pembagian	++ , --	Perkalian, Penurunan

Operator pembanding yang digunakan dalam PHP yaitu:

Operator	Fungsi	Operator	Fungsi
==	Sama dengan	<	Kurang dari
>	Lebih dari	<=	Kurang dari atau sama dengan
>=	Lebih dari atau sama dengan	!=, <>	Tidak sama dengan

Selain itu, operator Logika juga dapat digunakan di PHP, antara lain, and (&&), or(||), xor, dan !.

· Penulisan Karakter Khusus dengan tanda \

Karakter yang ditulis dengan diawali tanda (\) yaitu:

Karakter	Keterangan	Karakter	Keterangan
\”	Tanda petik ganda	\\	Tanda backslash
\$	Tanda $	\n	Pindah baris
\t	Tab	\x00 s.d \xFF	Heksadesimal

· Tipe Data

Tipe data yang dikenal pada pemrograman PHP yaitu :

Tipe data	Keterangan
Integer	Tipe data bilangan bulat
Double	Tipe data bilangan real
String	Tipe data teks

· Konversi Data

Fungsi-fungsi yang digunakan dalam PHP untuk mengkonversikan tipe data ke tipe data yang lain yaitu dengan memberikan fungsi intval, doubleval, dan strval. Atau dengan menggunakan teknik cast, yaitu dengan mengubah tipe ekspresi yang akan dikonversi.

· Menampilkan Tanggal dan Waktu

Untuk menampilkan tanggal dan waktu secara update, dapat menggunakan perintah date dengan format-format berikut :

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. Dasar Teori

Langka-langkah koneksi PHP-MySQL

1. Membuka koneksi ke server MySQL

mysql_connect()

digunakan untuk melakukan uji dan koneksi kepada server database MySQL.

Sintaks :

$conn = mysql_connect (“host”,”username”,”password”);

Host : adalah nama host atau alamat server database MySQL.

$conn : adalah nama variable penampung status hasil koneksi kepada database.

Username : adalah nama user yang telah diberi hak untuk dapat mengakses server database

Password : adalah kata sandi untuk username untuk dapat masuk kedalam database.

2. Memilih database yang akan digunakan di server

mysql_select_db

digunakan untuk melakukan koneksi kepada database yang dalam server yang berhasil dikoneksi dengan perintah mysql_connect().

$db = mysql_select_db(“’namadatabase”,$conn);

Sintaks :

$db: berisi status koneksi kepada database.

$conn : merupakan koneksi kepada server database yang berhasil.

Nama database : adalah nama database yang akan dikenai proses.

3. Mengambil sebuah query dari sebuah database.

Mysql_query()

Digunakan untuk melakukan eksekusi perintah SQL untuk memanipulasi database yang berhasil dilakukan koneksinya menggunakan mysql-select_db().

Sintaks :

$hasil = mysql_query(“SQL Statement”);

$hasil : akan berupa record set apabila SQL Statement berupa perintah select.

Contoh SQL Statement : “SELECT * FROM MAHASISWA ORDER BY NIM”

4. Mengambil record dari database

a. mysql_fetch_array()

digunakan untuk melakukan pemrosesan hasil query yang dilakukan dengan perintah mysql_query(), dan memasukkannya kedalam array asosiatif, array numeris atau keduanya.

$row = mysql_fetch_array($hasil);

Sintaks :

$row : adalah array satu record dari record $hasil yang diproses nomor record sesuai dengan nomor urut dari proses mysql_fetch_array yang sedang dilakukan.

$hasil : adalah record set yang akan diproses.

b. mysql-fetch_assoc()

Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja array yang dihasilkan hanya array asosiatif.

$row = mysql_fetch_assoc($hasil);

Sintaks :

c. mysql_fetch_row()

Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanyasaja array yang dihasilkan hanya array numeris.

$row = mysql_fetch_row($hasil);

Sintaks :

d. mysql_num_rows()

Fungsi ini digunakan untuk menghitung jumlah record yang ada pada database.

$row = mysql_num_row($hasil);

Sintaks :

$jml : akan memiliki nilai sesuai dengan jumlah record yang ada.

Pokok Bahasan VI

Desain Web Mobile dengan jQuery Mobile

A. Dasar Teori

jQuery Mobile adalah framework berbasis jQuery yang memudahkan kita untuk membuat web app untuk mobile. Selain jQuery mobile sebenarnya banyak frame work lain yang dapat digunakan seperti Sencha, jTouch, DHTMLX Touch, Jo dan lainnya.

Kelebihan jQuery adalah:

1. Support banyak platform: Webkit (Android, iOS, Opera, Chrome), Firefox mobile, Windows Phone, Blackberry, Bada, Meego.

2. Berbasis JQuery yang popular.

3. Penggunaanya banyak dan forum aktif.

jQuery mobile menyediakan komponen UI widget seperti button, listview, header dan elemen form dan navigasi. Kode ini dibangun oleh jQuery dan terus dikembangkan oleh pengembangnya secara aktif untuk memperbaiki bug-bug yang ada diaplikasi ini. Banyak fitur yang ditawarkan dalam framework ini termasuk dukungan HTML5. Ajax-powered navigasi link, dan sentuhan/atau navigasi gesekan.

Sebelum melakukan praktikum Desain Web Mobile dengan jQuery Mobile ini, yang perlu disiapkan adalah:

a. jquery.mobile-1.3.2.min.css

b. jquery-1.9.1.min.js

c. jquery.mobile-1.3.2.min.js

d. Images

e. opera Mobile Emulator download gratis.
u
s
s- umsida.ac.id
-- fst.umsida.ac.id

Cari Blog Ini

MUHAMMAD YAHYA BAKHTIAR UMSIDA

RANGKUMAN PRAKTIKUM PEMROGAMAN WEB 1-6

Komentar

Posting Komentar