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.