Fajarexe.files.wordpress.com



Praktikum 1

HTML

1. TUJUAN

a) Mengenal, memahami dan menguasai dasar-dasar HTML

b) Mengenal dan memahami script HTML

c) Mengenal dan memahami setiap objek sebagai dasar pembuatan interface pada halaman browser

d) Mampu membuat halaman web

2. MATERI

1. Struktur Dasar HTML

Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. Ciri utama dokumen HTML adalah adanya tag dan elemen. Elemen dalam dokumen HTML dikategorikan menjadi dua yaitu elemen yang berfungsi memberikan informasi tentang dokumen tersebut dan elemen yang menentukan bagaimana isi suatu dokumen ditampilkan oleh browser, seperti paragraf, list(daftar), tabel dan lain-lain. Sedangkan tag dinyatakan dengan tanda lebih kecil “ < “ (tag awal ) dan tanda lebih besar “ > “ (tag akhir). Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan dan diakhiri dengan (terdapat tanda "/").

Dokumen HTML mempunyai tiga buah tag utama yang membentuk struktur dari dokumen HTML yaitu HTML,HEAD dan BODY. Tag HTML berfungsi untuk menyatakan suatu dokumen HTML, tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML dan tag BODY berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML.

2. LISTS

Terdapat lima tipe list yang dapat digunakan, yaitu :

Unordered Lists :

Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag .

Contoh :

item nomer 1

item nomer 2

item nomer 3

Hasil dari kode di atas adalah:

• Item nomer 1

• Item nomer 2

• Item nomer 3

Ordered Lists :

Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan tag.

Contoh :

item nomer 1

item nomer 2

item nomer 3

Hasil dari kode di atas adalah :

1. Item nomer 1

2. Item nomerr 2

3. Item nomerr 3

Definition Lists:

Contoh :

item pertama.

penjelasan tentang item pertama.

item kedua.

penjelasan tentang item kedua

Hasil dari kode di atas adalah :

Item pertama.

Penjelasan tentang item pertama.

Item kedua.

Penjelasan tentang item kedua

3. IMAGES:

Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height

Contoh :

4. PARAGRAPH

Tag yang digunakan untuk membuat paragraf dalam suatu halaman web adalah dengan tag . atribut : align=(Center,left,right,justify)

Contoh

ini adalah paragraf

5. TABEL

Dalam pembuatan homepage, tabel memiliki fungsi yang tidak kalah penting dengan tagtag HTML lainnya. Pertama tabel berfungsi untuk menampilkan informasi secara terstruktur, ringkas dan mudah dibaca, kedua berfungsi untuk mengatur tampilan homepage agar lebih menarik. Tag utama untuk tabel yaitu dan untuk membuat judul tabel tagnya table header lalu untuk membuat data tabel atau isi tabel menggunakan tag table Data dan untuk membuat baris adalah memakai tag Table Rows

6. FORM

Form biasanya digunakan untuk mengumpulkan informasi dari user, sehingga memungkinkan suatu web server untuk menerima informasi dari pemakai melalui sejumlah elemen yang disebut kontrol. Kontrol ini bisa berupa suatu textbox, checkbox, radio button, push button, list menu dan lainnya. Standart penulisan form :

..

.

Atribut method memiliki dua nilai post dan get. Metode get mengirimkan data pada server dengan cara meletakan data pada bagian akhir URL yang ditunjuk. Metode post mengirimkan datanya secara terpisah. Jika data masukan banyak, lebih disarankan untuk menggunakan metode post. Atribut action berisi URL dari program yang dipanggil oleh form tersebut.

Textbox

Textbox merupakan salah satu jenis kontrol untuk memasukan data. HTML menyediakan tag dengan atribut type=”text” untuk membuat kotak input. Atribut lain yaitu name untuk memberi nama input, atribut Value untuk memberi nilai suatu input dan atribut size untuk menentukan batas terpanjang sebuah masukan. Dalam textbox kita juga dapat menyembunyikan masukan yang ditulis user dengan memberi nilai type=”password”. Masukan akan menjadi karakter “*”.

Checkbox

Checkbox digunakan untuk memberi beberapa pilihan kepada user. Dengan checkbox user dapat memilih salah satu, lebih dari satu pilihan atau tidak sama sekali memilih.

Radio

Pada type Radio, maka user memilih salah satu pilihan yang tersedia, sehingga user tidak bisa memilih kurang atau lebih dari satu pilihan. Atribut Checked memberi tanda bahwa pilihan tersebut sedang diaktifkan.

Submit dan Reset

Setiap form harus memiliki minimal tombol submit dan reset. Untuk membuatnya digunakan atribut type=”submit” dan type=”reset”. Tombol submit digunakan ketika user mengisi formulir dan ingin mengirimkan ke server. Sedangkan reset digunakan ketika user ingin menghapus semua masukan yang ditulis.

1.3. TUGAS PENDAHULUAN

1. Apa HTML itu?? Jelaskan!!

2. Apa yang dimaksud dengan

a. Web Statis

b. Web Dinamis

c. Web interaktif

Jelaskan !!

3. Buatlah halaman web dengan script HTML (min 4 halaman), yang mencakup:

a. Form

b. List

c. Table

d. Textbox

e. Radio

f. Paragraf

g. Submit dan Reset

(satu halaman menjadi HOME/Beranda)

1.4. TUGAS PRAKTIKUM

1. Buatlah 1 folder dengan nama P1__ , contoh 09999_6A

2. Buatlah 1 folder dengan nama dataweb__ difolder yang sudah dibuat di langkah 1, contoh dataweb_09999_6A

3. Buatlah 1 file dokumen dengan nama datadoc__ difolder yang sudah dibuat di langkah 1, contoh datadoc_09999_6A.doc

1. Contoh HTML sederhana :

struktur dokumen html

Hello,saya baru belajar bikin web lhooo…

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file awal.html

• Jalankan di browser dan buka file awal.html

• Capture hasil ditampilan browser

2. Heading dalam HTML :

::heading dokumen html::

heading tingkat 1

heading tingkat 2

heading tingkat 3

heading tingkat 4

heading tingkat 5

heading tingkat 6

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file heading.html

• Jalankan browser dan buka file heading.html

• Capture hasil ditampilan browser

3. Paragraf dalam HTML :

paragraf

HTTP adalah suatu protokol yang menentukan aturan yang perlu diikuti oleh web browser dalam meminta atau mengambil suatu dokumen dan oleh web server dalam menyediakan dokumen yang diminta web browser.

Internet berasal dari kata interconnection networking yang mempunyai arti hubungan berbagai komputer dan berbagai tipe komputer yang embentuk sistem jaringan dan mencakup seluruh dunia (jaringan global) dengan melalui jalur telekomunikasi seperti telepon, wireless dan lainnya.

Web Browser yang bertindak sebagai client memungkinkan anda untuk menginterpretasikan dan melihat informsi pada Web, sedang web server yang bertindak sebagai server memungkinkan anda untuk menerima informasi yang diminta browser

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file paragraf.html

• Jalankan browser dan buka file paragraf.html

• Capture hasil ditampilan browser

4. Preformatted Text dalam HTML :

preformatted text

Munafik

==============================

Munafik adalah perbuatan yang tercela yang bisa merugikan diri sendiri

dan orang lain.

Ciri-ciri orang munafik adalah :

- bila berbicara selalu berbohong

- bila dipercaya maka akan berhianat

- suka mengadu bomba.

- dll.

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file pre.html

• Jalankan browserdan buka file pre.html

• Capture hasil ditampilan browser

5. BLOCKQUOTE dalam HTML :

blockquote

sesuatu yang tidak perlu dicoba

sesuatu yang kelihatan mengasyikkan tapi sebenarnya lebih banyak

menambah masalah pada remaja adalah narkoba, seks, alkohol dan

merokok. jangan sekali-kali mencoba jika tidak ingin membuat

masalah baru

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file blockquote.html

• Jalankan di browser dan buka file blockquote.html

• Capture hasil ditampilan browser

6. Line Break dalam HTML :

linebreak

ada beberapa jalur alternative menuju ugm , yaitu :

melalui jakal melalui jalan selokan

melalui Colombo dll

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file linebreak.html

• Jalankan browserdan buka file linebreak.html

• Capture hasil ditampilan browser

7. Ukuran font dalam HTML :

ukuran font

ukuran font 1

ukuran font 2

ukuran font 3

ukuran font 4

ukuran font 5

ukuran font 6

ukuran font 7

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file font.html

• Jalankan browserdan buka file font.html

• Capture hasil ditampilan browser

8. Jenis font dalam HTML :

jenis font

arial , contoh ac milan

verdana , contoh persebaya

tahoma , contoh indonesia

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file fontface.html

• Jalankan browserdan buka file fontface.html

• Capture hasil ditampilan browser

9. Warna font dalam HTML :

warna font

yogyakarta

kota budaya

kota pariwisata dan pendidikan

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file fontcolor.html

• Jalankan browserdan buka file fontcolor.html

• Capture hasil ditampilan browser

10. Link dalam HTML :

link

pemain-pemain club zamaliq

Ikrimach,info lengkap

Ale

marwan

mamato

sidqi

kalo mau tahu lagi klik disini

ikrimach

bernama lengkap francessco totti ikrimach

ilcapitano de roma

pemain terbaik sepanjang masa

kembali ke atas

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file link.html

• Jalankan browserdan buka file link.html

• Capture hasil ditampilan browser

11. Link tujuan dalam HTML :

link tujuan

maaf, hanya sedikit

zaki

sa’ed

sa’ad

kembali

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file link2.html

• Jalankan browserdan buka file link2.html

• Capture hasil ditampilan browser

12. Membuat Tabel

:: Tabel ::

No.

Nama

Alamat

No. Telpon

1

ikrimach

 

 

2

Ale

 

 

3

Bentaos

 

 

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file table.html

• Jalankan browserdan buka file table.html

• Capture hasil ditampilan browser

13. Membuat Tabel Kompleks

:: Tabel yang kompleks ::

Fakultas

Mipa

Ekonomi

Pertanian

Matamatika

IPA

ilmu Komputer

Ekonomi

Manajemen

ilmu tanah

ilmu hama

pasca panen

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file tablekompleks.html

• Jalankan browserdan buka file tablekompleks.html

• Capture hasil ditampilan browser

14. Membuat Form Input dengan Text box

form input dengan text box

rancangan awal buku tamu

nama

:

alamat

:

sekolah

:

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file form.html

• Jalankan browserdan buka file form.html

• Capture hasil ditampilan browser

15. Membuat Form Input dengan Check box

form input dengan check box

pilih yang pasti segar

daftar menu minuman

jus tomat

es jeruk

es teh

soda gembira

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file check.html

• Jalankan browserdan buka file check.html

• Capture hasil ditampilan browser

16. Membuat Form Input dengan Radio box

form input dengan radio box

pilih salah satu

usia anda

< 15 tahun

15-19 tahun

19-25 tahun

25-35 tahun

> 35 tahun

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file radio.html

• Jalankan browserdan buka file radio.html

• Capture hasil ditampilan browser

17. Membuat Formulir Buku Tamu

buku tamu

buku tamu

nama

:

asal

:

email

:

homepageku

:

bagus sekali

bagus

biasa saja 

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file book.html

• Jalankan browserdan buka file book.html

• Capture hasil ditampilan browser

18. Membuat Frame

contoh frame

• Tulislah kode html tersebut diatas dengan program editor, kemudian

• Simpan kedalam direktori data anda dengan nama file praktik18.html

• Pada frame tersebut memerlukan 3 file yaitu header.html, kiri.html dan kanan.html maka buatlah file tersebut sebelum dijalankan.

Misalnya :

Header.html

:::header:::

Selamat Datangdi



kiri.html

::kiri::

profil

album

buku tamu

forum

link

kanan.html

profil.html

profil :

portal web ini adalah hasil karya anak-anak yang suka gembus

• buatlah atau tulis kode file-file tersebut diatas pada editor

• Jalankan browserdan buka file frame.html

• Capture hasil ditampilan browser

( Selamat mengerjakan........Semoga Berhasil (

Praktikum 2

TIPE DATA VARIABEL & FUNGSI

2.1. TUJUAN

a) Mengenal, memahami dan menguasai dasar-dasar PHP

b) Mengenal dan memahami script PHP

c) Mengenal dan memahami penggunaan Tipe Data, Variabel dan Fungsi dengan script PHP

d) Mampu menjalankan halaman browser dengan serverside PHP

e) Mampu membuat halaman web dengan PHP

2.2. MATERI

1. Struktur Dasar PHP

PHP adalah salah satu bahasa Server-side yang didesain khusus untuk aplikasi web. PHP dapat disisipkan diantara bahasa HTML dan karena bahasa Server side, maka bahasa PHP akan dieksekusi di server, sehingga yang dikirimkan ke browser adalah “hasil jadi” dalam bentuk HTML, dan kode PHP anda tidak akan terlihat.

Diawal Januari 2001, PHP telah dipakai lebih dari 5 juta domain diseluruh dunia, dan akan terus bertambah karena kemudahan aplikasi PHP ini dibandingkan dengan bahasa Server side yang lain. Anda dapat melihat angka sesungguhnya di .

PHP termasuk dalam Open Source Product. Jadi anda dapat merubah source code dan mendistribusikannya secara bebas. PHP juga diedarkan secara gratis. Anda bisa mendapatkannya secara gratis. PHP juga dapat berjalan diberbagai web server semisal IIS, Apache. PWS, dll.

Langkah untuk menjalankan dokumen php pada server apache :

1. Simpan dokument.php di folder apache/htdocs/

2. Jalankan web server apache.

3. Pada browser address ketikkan URL dokument.php contoh :



Aturan penulisan script php :

1. Script php diawali tag “ ”.

- contoh penulisan kode php :

a.

b.

c.

script php

2. Penulisan tag php dengan html

Script PHP dalam tag html

3. Penulisan script php tanpa html

4. Menulis tag html dengan php

5. Menulis komentar

6. Setiap statement php diakhiri dengan tanda ( ;) petik koma.

2. Type Data Dan Variable

Type data adalah jenis data yang akan ditampung oleh suatu variable. Sedangkan variable merupakan tempat untuk menampung data atau nilai.

Dalam php terdapat tipe data dasar yaitu:

• Integer, untuk data yang berisi angka. Data tersebut dapat digunakan untuk operasi matematika.

• String, untuk data yang berisi karakter, tipe data ini tidak digunakan untuk operasi matematika.

• Array, untuk data yang berkelompok. Array memiliki nama variable yang sama. Definisi lain dari array adalah kumpulan variable yang memiliki tipe data yang sama.

• Float/ double, untuk data yang berupa pecahan desimal. Untuk menangani operasi matematika dengan nilai pecahan.

• Objek, digunakan dengan statement fuction.

Aturan untuk pendeklarasian variable :

1. Suatu variable dinyatakan dengan tanda dollar ( $ ) dan diikuti nama variable.

2. Nama variable tidak boleh diawali dengan angka, harus dengan karakter, setelahnya dapat diikuti dengan angka/underscore ( garis bawah).

3. Penamaan bersifat case sensitive atau variable membendakan huruf kecil dan besar.

4. Deklarasi variable selalu diikuti dengan pemberian ( assignment) nilai dari variable tersebut. Jika sebuah variable belum memiliki nilai tidak perlu dideklarasikan terlebih dahulu.

Contoh pendeklarasian variable yang benar :

contoh yang salah :

Konstanta

Konstanta adalah variabel yang nilai tetap. PHP telah mendefinisikan beberapa konstanta seperti E_ERROR, E_WARNING, PHP_VERSION dan sebagainya. Cara membuat konstanta, standar penulisan konstanta :

Define (“nama_konstanta”,”nilai_konstanta”);

Contoh :

Array

Array merupakan kumpulan variable yang memiliki index berbentuk numeric atau string.

Seperti bahasa pemrograman yang lain, php juga menggunakan indeks berupa data numeric yang biasanya dimulai dari angka nol.

Membuat dan mengakses array

Untuk membuat array hampir sama dengan membuat variable yang lain. Namun disini kita harus memberikan indeks. Sebagai contoh :

Bentuk 1

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download