RANGKUMAN PRAKTIKUM PEMOGRAMAN BERBASIS WEB
Bismillahirrahmanirrahim
Assalamualaikum Wr. Wb.
Hai Teman - Teman..!! Perkenalkan nama Saya Reyhan Adi Saputra, Saya Mahasiswa dari Universitas Muhammadiyah Sidoarjo dari jurusan Teknik Informatika
Jika kamu tertarik dengan Universitas saya silahkan akses link berikut :
Kali ini saya akan memberikan rangkuman dari hasil Praktikum Sistem Digital yang saya sudah buat
Semoga rangkuman bermanfaat untuk kita semua
POKOK BAHASAN 1
HTML (HyperText Markup Languange)
Fitur Baru HTML5 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 baru pada form, seperti
kalender, tanggal, waktu, email, url, an search
Tabel 3. 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
element 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 |
|
<em>
|
|
|
|
Mendefinisikan
text rapat |
|
<embed>*
|
|
|
Mendefinisikan
external content |
|
|
<fieldset>
|
|
|
Mendefinisikan
fieldset |
|
|
<figure>*
|
|
|
Mendefinisikan
isi media, dan keterangan |
|
|
<footer>*
|
|
|
Mendefinisikan
bagian footer |
|
|
<form>
|
|
|
|
Mendefinisikan
formulir |
|
<h
I> sampai <h6> |
Mendefinisikan
header |
|||
|
<head>
|
|
|
|
Mendefinisikan
informasi tentang document |
|
<header>*
|
|
|
Mendefinisikan
sebuah header untuk bagian suatu laman |
|
|
<hgroup>*
|
|
|
Mendefinisikan
informasi tentang bagian sebuah document |
|
|
<hr>
|
|
|
|
Mendefinisikan
garis horisontal |
|
<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
refrensi sumber |
|
<map>
|
|
|
|
Mendefinisikan
peta gambar |
|
<mark>* |
|
|
|
Mendefinisikan
text yang ditandai |
|
<men
|
|
|
|
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
grup pilhan |
|||
|
<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
tentanf penngunaan ruby |
|||
|
<ruby>*
|
Mendefinisikan
ruby annotations. |
|||
|
<script>
|
Mendefinisikan
script |
|||
|
<section>*
|
Mendefinisikan
section |
|||
|
<select>
|
Mendefinisikan
selectable list |
|||
|
<small>
|
Mendefinisikan
text kecil |
|||
|
<source>*
|
Mendefinisikan
media resources |
|||
|
<span>
|
Mendefinisikan
bagian dalam sebuah document |
|||
|
<strong>
|
Mendefinisikan
text pekat/tebal |
|||
|
<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 document |
|||
|
<tr>
|
Mendefinisikan
baris table |
|||
|
<ul>
|
Mendefinisikan
daftar |
|||
|
<video>*
|
Mendefinisikan
video |
|||
POKOK BAHASAN 2
CSS (Cascading Style Sheet)
Inline
Style Sheet
CSS
didefmisikan lang sung pada tag HTML yang bersangkutan. Cara penulisannya cukup
dengan menambahkan atribut style=" ... " dalam tag HTML tersebut.
Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi
tag HTML yang lain.
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. File style sheet text disimpan menggunakan
Syntax CSS
Syntax
pada CSS terdiri dari tiga bag ian, yaitu selector, property dan value.
Bagian selector utuk menentukan pada elemen/tag HTML apa style tersebut diterapkan. Selector dapat berupa nama id elemen atau nama class. Property dapat diisi dengan jenis warna, ukuran, perataan margin dll, sedangkan value diisi dengan nilai dari propertynya, misalnya red utuk warna dll. Setiap akhir penulisan property dan value diakhiri dengan tanda titik koma (semicolo). Tanda ini juga digunakan sebagai pemisah antar satu property dengan property lain.
Jika value lebih dari sebuah kata, maka harns diapit
dengan tanda kutip ganda diantara value:
P{font-family: “sans serif”}
Jika Anda ingin menetapkan lebih dari satu property, maka
property harus dipisahkan dengan titik koma (semicolon). Berikut ini adalah
contoh yang menampilkan pendefmisian elemen paragraph agar rata tengah serta
warna text nya adalah merah:
P{text-align:center;color:red}
Agar definisi style lebih mudah dibaca, maka kita dapat
menuliskannya dengan bentuk berikut:
P{
Text-align: center;
Color: black;
Font-family: arial
}
Grouping
Kita
dapat mengelompokkan selector, pisahkan tiap selector dnegan sebuah koma.
Berikut ini adalah contoh pengelompokkan element header yang memiliki style
warna text yang sama:
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. Secara umum syntax style untuk class adalah sebagai
berikut
.namaKelas{
Property1: value1;
Property2: value2;
.
.
}
Misalnya kita ingin mendefmisikan dua buah tipe
paragraph yaitu paragraph dengan rata kanan, sedang yang lainnya adalah rata
tengah. Berikut bentuk penulisannya:
p.right
{text-align: right}
p.center
{text-align: center}
Dalam
dokumen HTML kita harus menambahkan attribute class:
<p
class=”right”>This paragraph will be right-aligned. </p>
<p
class=”center”>This paragraph will be center-aligned. </p
Pada contoh dibawah ini, semua elemen HTML dengan
class="center", akan menjadikan rata tengah.
center
{text-align: center
Pada
dokumen HTML dibawah, elemen hi dan elemen p menggunakan class
"center", artinya kedua elemen tersebut akan mengikuti aturan pada
selector "center":
<h1
class=”center”>This heading will be center-aligned </h1>
<p class=”center”>This paragraph will also be
center-aligned </p>
Id Selector
Kita juga dapat
mendifinisikan style dengan menggunakan 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. Sebuah komentar akan
diabaikan oleh browser. Komentar pada CSS dimulai dengan /* dan diakhiri dengan
*/, seperti contoh berikut:
/* This is a comment */ p {
text-align: center;
/* This is anhoter comment */
color: black
font-family: arial
POKOK BAHASAN 3
Javascript
Letak JavaScript dalam HTML
Script
JavaScript dalam dokumen HTML dapat diletakkan pada :
1. Bagian
Head
2. Bagian
Body (jarang digunakan)
Arithmetic
Operators
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 4
PHP
Array
Array merupakan
suatu variabel yang dapat berisi banyak data dalam waktu yang sama.
Pendefinisisan Array dapat dibentuk dengan format berikut :
$nama_array=array(elemen_1,...,elemen_n);
Untuk
menghitung jumlah elemen array digunakan fungsi count(), dengan
format count($nama_array)
§ Operator
Dalam PHP juga dapat
melakukan proses operasi, bail itu penjumlahan, operasi logika, ataupun operasi
pembanding.
Operasi Mtematika yang
digunakan dalam PHP yaitu :
|
Operator |
Fungsi |
Operator |
Fungsi |
|
+ |
Penjumlahan |
- |
Pengurangan |
|
* |
Perkalian |
/ |
Pembagian |
|
% |
Sisa
pembagian |
++,-- |
Penaikan,
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 :
|
Karaketer |
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
Tipe Data
Fungsi-fungsi yang
digunakan dalam PHP untuk mengkonversi 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 fan 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 (00..59) |
|
W |
Hari (
0=Sunday.. 6=Saturday ) |
POKOK BAHASAN 5
Manajemen File dan Disk
Langkah-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,”database”); |
$conn : adalah nama variabel penampungan status
hasil koneksi kepada database.
Host : adalah nama host atau alamat server
database MySQL.
Username : adalah nama user yang telah diberi hak untuk
dapat mengakses server database.
Password : adalah kata sandi untuk username untuk dapat masuk ke dalam database. : adalah nama database yang ada di mysql1. Mengambil sebuah query dari sebuah database.mysqli_query()
Digunakan untuk melakukan eksekusi perintah SQL untuk memanipulasi database yang
berhasil dilakukan koneksi
Sintaks :
|
$hasil = mysqli_query(“SQL Statement”); |
$hasil : akan beurpa record set apabila SQL Statement berupa perintah
select.
Contoh SQL Statement : SELECT * FROM MAHASISWA ORDER BY NIM
SQL
Statement: “SELECT*FROM MAHASISWA ORDER BY NIM”
2.
Mengambil record dari
database
a. Mysql_fetch_array()
Digunakan
untuk melakukan pemrosesan hasil query yang dilakukan dengan perintah
mysql_query(), dan memasukkannya ke dalam array asosiatif, array numeris atau
keduanya.
Sintaks :
|
$row=mysql_fetch_array($hasil); |
$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 aaray asosiatif.
Sintaks :
|
$row=mysql_fetch_assoc($hasil); |
c. Mysql_fetch_row()
Fungsi
ini hampir sama dengan fungsi mysql_fetch_array(), hanya aja array yang dihasilkan
hanya array numeris.
Sintaks :
|
$row=mysql_fetch_row($hasil); |
Mysql_num_rows()
Fungsi
ini digunakan untuk menghitung jumlah record yang ada pada database.
Sintaks :
|
$row=mysql_num_row($hasil); |
$jml : akan memiliki nilai sesuai dengan
jumlah record yang ada.
POKOK BAHASAN 6
Desain Web Mobile dengan jQuery Mobile
query Mobile adalah
framework berbasis jQuery yang memudahkan kita untuk membuat web app untuk
mobile. Selain jQuery mobile sebenarnya banyak framework 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. Berbasis JQuery yang populer.Penggunanya 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.4.5.min.css
b.
jquery-1.11.1.min.js
c.
jquery.mobile-1.4.5.min.js
d.
images
e.
Web Browser
Komentar
Posting Komentar