Post on 24-Nov-2015
PERTEMUAN I
DASAR-DASAR TAG HTML
A. Tag utama HTML
Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari
document HTML.
Contoh: Setiap document HTML di awali dan diakhiri dengan tag HTML.
Document HTML bisa di bagi mejadi tiga bagian utama yaitu:
1. HTML.
Setiap document HTML harus di awali dan ditutup dengan tag HTML contoh :
tag HTML memberitahu browser bahawa yang di dalam kedua tag tersebut adalah document HTML.
2. HEAD
Bagian header dari document HTML diapit oleh tag di dalam bagian ini
biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
3. BODY
Dokument body di gunakan untuk menampilkan text, image link dan semua yang akan di
tampilkan pada web page.
Kemudian File tersebut simpan di folder C-->xampphtdocs dengan nama latihan1.html;
kemudianakses di browser dengan URL :localhost/latihan1.html Kemudian hasilnya seperti berikut :
B. Basic HTML Element
1. Block Level Element
Block level element yang sering di gunakan Heading (H1 sampai H6), bullet symbol, tag paragraph,
tag blok,Contoh :
Kemudian silahkan run program akan menghasilkan seperti berikut :
FORMAT DAN TAG HTML
NO TAG FUNGSI
1 ... Bold text
2 ... Italic text
3 ... Underline Text
4 ... Untuk ukuran yang lebih besar dari normal
5 ... Untuk ukuran yang lebih kecil dari normal
6 ... Untuk memberi garis di tengah text
7 ... Center document
8 ...
Untuk tulisan menjorok kedalam
LATIHAN :
Silahkan buat dokumen html dengan hasil seperti berikut :
PERTEMUAN II
TAG HTML LANJUT
1. Link
Perintah anchor digunakan untuk membuat suatu link. Untuk membuat link ke
dokumen HTML lain digunakan perintah Teks yang akan
ditampilkan di browser .
Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan
nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan
atribut NAME pada tag . Misalnya
Untuk linknya belum aktif karena file yang dijadikan link belum tersedia di folder
pemrograman_web , oleh karena itu kita perlu membuat 2 buah file yang akan ditampilkan
ketika link di klik.
Silahkan buat satu page html dengan sintax seperti berikut :
Silahkan simpan difolder C: xampp htdocs pemrograman_web dengan nama
makanan.html
Selanjutnya membuat page html untuk komposisi menu minuman. Silahkan buat satu page
html dengan sintax seperti berikut :
Silahkan simpan difolder C: xampp htdocs pemrograman_web dengan nama
minuman.html
2. Menampilkan gambar di halaman HTML Biasanya orang menggunakan gambar untuk memperindah situsnya. HTML menyediakan
tag untuk menampilkan gambar dalam halaman web. Dari berbagai macam format
gambar yang ada, hanya beberapa saja yang bisa dipergunakan dalam membuat halaman web.
Format gambar yang paling sering digunakan adalah GIF dan JPEG. Format penulisannya adalah:
Atribut SRC digunakan untuk menentukan sumber gambar. Atribut ALT berfungsi sebagai
teks pengganti gambar untuk browser yang tidak bisa mendukung grafik.
Beberapa atribut pada tag yang biasa digunakan dalam halaman-halaman web.
BORDER : memberikan suatu border atau batas pada gambar, default-nya = 0
HEIGHT, WIDTH : menentukan tinggi dan lebar suatu gambar dalam ukuran pixel
HEIGHT, WIDTH : menentukan tinggi dan lebar suatu gambar dalam ukuran pixel
ALIGN : mengatur perataan gambar terhadap objek di sekelilingnya. Nilainya bisa berupa
LEFT, CENTER, RIGHT, BOTTOM, TOP dan MIDDLE
Contoh kode program yang akan digunakan untuk menampilkan gambar pada halaman html :
Note :Gambar harus sudah tersimpan satu folder dengan file html yang akan menampilkan
gambar.
Output :
3. TABEL
Tabel banyak digunakan karena dapat menampilkan informasi dengan bentuk yang ringkas
dan mudah dibaca. Untuk membuat tabel digunakan tag awal dan tag penutup
. Tag mewakili beberapa bagian penting, yaitu:
CAPTION> digunakan untuk membentuk judul tabel. Judul tabel ini akan
terletak diluar tabel, bisa di bagian atas atau bagian bawah tabel
berfungsi untuk meletakkan judul tabel di bagian paling atas atau paling
kiri dari suatu tabel
digunakan sebagai tempat menulis data atau informasi dalam tabel
Contoh :
Silahkan simpan dengan nama tabel.html
Kemudian RUN program dengan mengakses URL dimana halaman tersebut ditempatkan. Output
program :
Tugas :
1. Silahkan buat program dengan tampilan seperti berikut :
2.
PERTEMUAN III
TABEL (lanjutan) DAN INPUT TYPE
1.1. Table ALIGN dan WIDTH
Perataan horizontal tabel menggunakan atribut ALIGN. ALIGN dapat bernilai LEFT
untuk perataan kiri, CENTER untuk perataan di tengah dan RIGHT untuk perataan di
kanan. Sedangkan untuk perataan vertikal menggunakan atribut VALIGN. VALIGN dapat
bernilai TOP untuk perataan atas, MIDDLE untuk perataan di tengah dan BOTTOM
untuk perataan di bawah. Lebar tabel biasanya diatur menggunakan atribut WIDTH. Nilai
WIDTH dapat dinyatakan dengan persen (%) yang menyatakan lebar tabel dalam
persentase atau dinyatakan dengan pixel yang berarti ukuran sesungguhnya dari tabel.
Contoh dalam penggunaan ALIGN dan WIDTH
1.2. Table CELLSPACING dan CELLPADDING
Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat di antara dua
buah sel. CELLPADDING berfungsi untuk mengatur jumlah spasi yang terdapat di antara batas /
border dengan isi atau teks di dalam sel tersebut.
Contoh:
Silahkan RUN program, silahkan lihat hasilnya. Outputnya akan seperti berikut :
1.3. Table COLSPAN dan ROWSPAN
Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi satu kolom.
Sedangkan ROWSPAN digunakan untuk menggabungkan beberapa baris menjadi satu.
Contoh :
Save, kemudian RUN program, maka output program akan seperti berikut :
2.1 Komponen-komponen pada HTML
Dalam HTML terdapat komponen-komponen yang dapat digunakan sebagai interface yang
ditujukan untuk interaksi antara user dengan program yang kita buat, sama halnya seperti
pemrograman visual lainnya, tetapi terdapat perbedaan dalam menambahkan komponen HTML
dalam page yang akan ditampilkan, kita dituntut untuk menghapal sintax-sintax HTML yang
digunakan untuk membuat komponen objek dalam HTML, ada beberapa sintax, seperti berikut :
Input type jenis ini biasa digunakan untuk mengisi form Ussername atau Email sesuai dengan
kebutuhan Berikut ini adalah contoh kode html nya :
Catatan :
1. Atribut type adalah sebagai penenti jenis objek apa yang akan kita gunakan, apakan
teks field, combo box, radia button, button dll.
2. Atribut name digunakan sebagai pemberian nama variable pada jenis objek yang
digunakan.
3. Apabila ada yang kurang jelas dan belum bias dipahami, silahkan bertanya pada
instruktur.
JENIS SINTAK HTML Input type text
(Text Field)
Input type password
(Password Field)
input type checkbox
Input type submit (tombol)
Input type radio
Input Select
Laki-Laki Perempuan
Input Text Area
Field Set Data Mahasiswa
LATIHAN :
1. Silahkan buat tampilan seperti berikut ini :
Silahkan set border tabel menjadi 0, sehingga tampilannya seperti berikut :
PETEMUAN IV
FORM, CSS DAN JAVASCRIPT
1. FORM
Form digunakan sebagai media perantara antara HTML dan PHP, dimana FORM digunakan
untuk kebutuhan import data dan pengiriman data kedalam database, pada dasarnya HTML adalah
sebagai user interface dalam page HTML dan PHP adalah sebagai pemeroses logic yang
digunakan sesuai kebutuhan, untuk penjelasan PHP akan dibahas lebih rinci dipertemuan
berikutnya.
Contoh tag yang dipakai unuk membuat form.
Tag HTML untuk membuat FORM
Keterangan :
1. Atribut id dapat diterapkan untuk pengembang yang menggunakan JavaScript, pengembang
dapat dengan mudah untuk mengakses dan memanipulasi setiap individu elemen input.
2. Atribut name bisa kita sebut sebagai nama variabel dari form.
3. Atribut method digunakan untuk cara yang dilakukan form untuk mengirim data data
inputan (akan dibahas lebih dalam pada point berikutnya).
4. Atribut action digunakan untuk mendefinisikan file php yang akan memproses inputan dari
form, terutama untuk insert ke database.
1.2 Method GET dan POST pada FORM.
1. Method GET
Jika method yang digunakan adalah GET, dengan sengaja digunakan, untuk dapat
melihat secara langsung, kita tidak perlu membuat aplikasi tambahan untuk memroses data.
Mengapa? Karena dengan method get, kita dapat secara langsung melihat proses pengiriman
data pada alamat URL dari browser.
2. Method POST
Method POST adalah kebalikan dari method GET, dimana kita tidak dapat melihat
data yang dikirimkan, biasanya method post ini digunakan untuk inputan username dan
password atau data data yang bersipat rahasia.
2. Cascading Style Sheets (CSS)
CSS merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis
dalam HTML. Jika kita berbicara dalam konteks web, bisa di artikan secara bebas sebagai : CSS
merupakan bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.
CSS ditempatkan diantara pada dokumen html dengan pendefinisian TAG
seperti berikut :
2.1 Cara pengaksesan sebuah CSS yang akan digunakan dalam HTML.
Pengaksesan CSS oleh objek yang terdapat didokumen HTML biasa disebut dengan selector,
terdapat 2 jenis selector antara lain :
Class selector : merupakan salah satu selector yang paling umum dan paling sering
digunakan. Class Selector akan mencari seluruh tag yang memiliki atribut class dengan
nilai yang sesuai.
Untuk penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut
class. Contohnya:
Untuk class selector, CSS menggunakan tanda titik sebelum nama dari class.
Untuk contoh kita, seluruh class yang memiliki nilai paragraf_pertama, warna text akan
menjadi merah. Dan seluruh class judul akan memiliki font 20 pixel.
Selector, property dan value pada CSS.
Contoh :
Silahkan dicoba kode program dibawah ini :
Save kemudian RUN dengan mengakses URL file tersebut.
Id selector
ID Selector bersama-sama dengan class selector merupakan selector paling umum dan
paling sering dipakai. Penggunaan ID selector hampir sama dengan class selector, dengan
perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk
ID selector, kita menggunakan atribut id.
Contoh penggunaan atribut id pada tag HTML :
Atribut id selain untuk selector CSS juga berperan sebagai kode unik untuk masing-masing
tag. Karena hal tersebut, id yang digunakan harus unik dan tidak boleh sama. Dengan kata
lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh
sama.
Contoh penggunaan id selector kode CSS Class Selector adalah sebagai berikut:
Untuk atribut CSS dan belajar tentang CSS, silahkan eksplorasi di :
http://www.w3schools.com/css/default.asp
3. JAVASCRIPT
JavaScript adalah bahasa yang digunakan untuk membuat program yang digunakan agar
dokumen HTML yang ditampilkan dalam browser menjadi lebih interaktif. JavaScript
memberikan beberapa fungsionalitas ke dalam halaman web, sehingga dapat menjadi sebuah
program yang disajikan dengan menggunakan antarmuka web.
JavaScript umumnya sama seperti CSS, yaitu ditempatkan diantara Contoh
:
Apabila JavaScript tidak digabung dengan halaman HTMLnya maka cara menggunakannya
adalah sebagai berikut :
Dengan catatan file javascriptnya diberi ekstensi .js
Contoh :
1. Javascript untuk Validasi inputan :
LATIHAN :
1. Silahkan buat file seperti contoh diatas, tetapi javascripnya dipisahkan dengan dokumen
HTML.
PERTEMUAN V
PENGENALAN PHP
PHP adalah :
1. Merupakan singkatan recursive dari PHP : Hypertext Prepocessor
2. Pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1994.
3. Harus ditulis di antara tag :
dan
4. Setiap satu statement (perintah) biasanya diakhiri dengan titik-koma (;)
5. CASE SENSITIVE untuk nama identifier yang dibuat oleh user (berupa
variable, konstanta, fungsi dll), namun TIDAK CASE SENSITIVE untuk
identifier built-in dari PHP. Jadi :
$nama $Nama $NAMA
hitungLuas() HitungLuas()
echo = ECHO
while = WHILE
6. Mudah dipelajari.
HELLO WORD di PHP :
1. Ketikkan perintah di bawah ini di editor :
Program 1.1 Nama File : hello.php
Deskripsi : Program sederhana menampilkan sebuah string di layar 2. Simpan dengan nama hello.php. 3. Buka browser dan ketikkan alamat http://localhost/nama folder/hello.php 4. Lihat hasilnya di browser. Akan terlihat tampilan seperti pada gambar 2.1
VARIABEL di PHP
Digunakan untuk menyimpan sebuah value, data atau informasi Nama variabel diawali dengan tanda $ Panjang tidak terbatas Setelah tanda $ diawali oleh huruf atau under-scrore (_). Karakter Cc Setelah tanda $ diawali oleh huruf atau under-scrore (_). Karakter berikutnya bisa terdiri dari huruf, angka, dan karakter tertentu yang
diperbolehkan (karakter ASCII dari 127 255). Bersifat case-sensitive Tidak perlu dideklarasikan Tidak boleh mengandung spasi.
Program 1.2 Nama File : variabel.php Deskripsi : Program mengisi dan menampilkan variabel di layar.
TIPE DATA
Pada PHP, tipe data variabel tidak didefinisikan oleh programmer, akan tetapi secara otomatis ditentukan oleh intepreter PHP. Namun demikian, PHP mendukung 8 (delapan) buah tipe data primitif, yaitu :
1. boolean 5. array
2. integer 6. object
3. float 7. resource
4. string 8. NULL
Program 1.3
Nama File : tipe.php
Deskripsi : Program contoh penanganan beberapa tipe data dasar dalam PHP.
KONSTANTA
Konstanta merupakan variabel konstan yang nilainya tidak berubah-ubah. Untuk mendefinisikan konstanta dalam PHP, menggunakan fungsi define()
Program 2.4 Nama File : konstanta.php Deskripsi : Program penggunaan konstanta dalam PHP.
OPERATOR DALAM PHP
Program 1.5
Nama File : operator.php
Deskripsi : Program beberapa Operator aritmatika dalam PHP.
KOMENTAR PROGRAM
Dalam PHP, komentar program bisa menggunakan :
/* dan */
// dan
#
PERTEMUAN VI
STRUKTUR KONDISI, PERULANGAN PADA PHP
DAN PENGGABUNGAN ANTARA PHP DAN HTML
Struktur Kondisi If
Sintax yang digunakan adalah :
Keterangan : kondisi merupakan statemen atau variabel yang akan diperiksa TRUE atau FALSE-nya. Struktur Kondisi If ... Else Sintax yang digunakan adalah :
Keterangan : kondisi merupakan statemen atau variabel yang akan diperiksa TRUE atau FALSE-nya. Jika kondisinya TRUE maka statemen yang berada di blok if akan dieksekusi, sebaliknya jika kondisinya FALSE maka statemen yang berada di blok else yang akan dieksekusi. Struktur Kondisi Switch ... Case
Keterangan :
$var merupakan variabel yang akan diperiksa isi atau nilainya. Tipe data variabel ini tidak
dibatasi.
Value pada case juga bisa berupa string, integer, boolean, bahkan bisa berupa conditional-
statement. Boleh memakai kutip tunggal maupun kutip ganda.
Program 3.1
Nama File : if.php
Deskripsi : Program Struktur Kondisi else If.
Program 3.5
Nama File : switch.php
Deskripsi : Program Struktur Switch..Case
PERULANGAN DALAM PHP
Silahkan RUN program dengan mengakses URLnya.
LATIHAN :
1. Silahkan buat program menghitung nilai hurup mata kuliah menggunakan php dan html.
PERTEMUAN VII
PENANGANAN FORM
Form inputan dibuat dengan tag-tag HTML. Halaman yang mengandung form murni (tidak ada script php) tidak harus disimpan dalam bentuk php, bisa dalam bentuk html. Untuk merancang sebuah form inputan, setidaknya ada 3 (tiga) hal penting, yi : 1. METHOD Method dari sebuah form menentukan bagaimana data inputan form dikirim. Method ini ada dua macam, yaitu GET dan POST. Method ini menentukan bagaimana data inputan dikirim dan diproses oleh PHP. 2. ACTION Action dari sebuah form menentukan dimana data inputan dari form diproses. Jika action ini dikosongkan, maka dianggap proses form terjadi di halaman yang sama. Jadi halaman form dan halaman proses bisa saja dipisah atau dijadikan satu. 3. SUBMIT BUTTON Submit button merupakan sebuah tombol (pada umumnya) yang berfungsi sebagai trigger pengiriman data dari form inputan. Jika tombol ini ditekan, maka data form akan dikirimkan (diproses) di halaman yang sudah ditentukan pada atribut action.
Form Input Type TEXT dan PASSWORD
Program 1.1 Nama File : input.php Deskripsi : Program menampilkan form inputan text dalam jumlah banyak
Program 1.2 Nama File : proses.php Deskripsi : Program penanganan form inputan untuk Program 1.1
Penjelasan : Baris 2-6 adalah mengambil nilai dari masing2 form di program 1. Selanjutnya variabel ditampilkan di baris 7-11 Program 1.3 Nama File : input1.php Deskripsi : Program menampilkan form login (inputan text dan password).
Program 1.4 Nama File : proses1.php Deskripsi : Program sederhana untuk memeriksa inputan username dan password pada program 1.4
Penjelasan :
Program 1.3 akan menampilkan form login sederhana yang terdiri dari inputan username dan password. Selanjutnya nilai yang diinput akan diproses di program 1.4 Jika username dan password diinput dengan benar maka akan ditampilkan pesan berhasil dan jika login salah maka akan ditampilkan pesan kesalahan. Form Input Type RADIO Pada inputan jenis radio button, user hanya bisa memilih satu pilihan di antara beberapa pilihan.
Program 1.5 Nama File : input2.php Deskripsi : Program menampilkan form pilihan jurusan dengan radio button.
Program 1.6 Nama File : proses2.php Deskripsi : Program untuk mengambil dan menampilkan jurusan yang dipilih pada program 1.5
PERTEMUAN VIII SESSION
Session merupakan hal yang cukup penting dalam aplikasi berbasis web. Dengan session memungkinkan programmer menyimpan informasi user secara semi-permanen, artinya selama masa tertentu informasi akan tersimpan. Penyimpanan isi variabel session berada di server, jadi tidak bisa diakses secara langsung oleh client. Dalam aplikasi berbasis web, session banyak digunakan sebagai autentifikasi login. Dengan session memungkinkan programmer mengatur siapa saja yang bisa mengakses suatu halaman. Misalnya saja, untuk melihat halaman kotak surat pada email, kita harus login terlebih dahulu. Dalam proses login antara lain akan terjadi pembuatan suatu session yang akan dibawa oleh user di setiap halaman. Di halaman kotak surat, session tersebut akan diperiksa. Jika session benar maka user dipersilahkan membuka halaman kotak surat, namun jika salah maka user tidak bisa membuka halaman kotak surat dan biasanya akan diminta untuk login terlebih dahulu. Itulah sebabnya, user tidak bisa mengakses halaman kotak surat secara langsung tanpa melakukan login. Dalam penanganan session terdapa beberapa proses yang perlu diperhatikan :
Proses pembuatan session Proses pemeriksaan session Proses penghapusan session
Program 1.1 Nama File : session1.php Deskripsi : Program menciptakan session.
Program 1.2 Nama File : session2.php Deskripsi : Program pemeriksaan session.
Program 1.3 Nama File : session3.php Deskripsi : Program menghapus session.
PERTEMUAN IX PHP dan MySQL
Sebuah web yang dinamis membutuhkan database sebagai tempat penyimpanan sebuah konten atau data data yang diinputkan yang perlu disimpan, oleh karena itu kita akan mencoba PHP dan MySQL yang akan dijadikan sebagai alat untuk membuat web dinamis. MEMBUAT DATABASE Untuk membuat database silahkan akses phpmyadmin melalui browser,
Kemudian silahkan buat database dengan nama mahasiswa Setelah itu silahkan buat field-field sebagai berikut :
Untuk dapat menyimpan data kedalam database yang kita buat tadi, diperlukan koneksi antara PHP dengan MySQL dengan cara : Program 1.1 Nama File : koneksi.php Deskripsi : Program membuat koneksi ke MySQL.
Program 1.2 Nama File : formulir.php Deskripsi : Program untuk formulir inputan.
Program 1.3 Nama File : proses.php Deskripsi : Program memproses formulir inputan.