Satuan Acara Perkuliahan

Mata Kuliah

Praktikum Pemrograman WEB

Tujuan

Mahasiswa mampu membuat halaman web dinamis berbasiskan suatu basis data.

Silabus:

1. HTML

2. PHP

3. MySQL

4. PHP-MySQL

Referensi:

Rencana Perkuliahan:

Minggu	Pokok Bahasan
1	Dasar Pemrograman HTML
2	List, Gambar, Tabel
3	Frame, Form,Multimedia/Animasi
4	Variabel, Sintaks IF di PHP
5	UTS
6	Sintaks Perulangan & Array di PHP
7	Cookies & Session
8	MySQL & MyAdmin
9	MySQL & PHP
10	Aplikasi Sederhana: Proses daftar anggota Klub
11	UAS

Modul I

Dasar Dokumen HTML

(Hyper Text MarkUp Language)

Tujuan:

Mahasiswa mampu membuat dokumen web sederhana/statis berbasiskan HTML
Mahasiswa mampu memahami cara kerja webserver dan HTML.

Landasan Teori

Internet telah berkembang begitu cepat. HTML adalah salah satu dokumen standard internet. HTML umumnya dipakai untuk halaman web yang bersifat statik, misalnya artikel ilimiah, menu, dll. Walaupun mengunakan kata “language” HTML bukanlah bahasa pemrograman.

Cara kerja HTML

Cara kerja HTML dapat dilihat pada gambar di bawah ini:

Saat ada permintaan suatu halaman dari browser klien, server web akan melakukan 3 langkah:

1. membaca permintaan browser.

2. mencari halaman html yang diminta di server.

3. mengirim halaman htnl yang diminta ke browser klien melalui media internet atau intranet.

Setelah halaman html diterima oleh klien, browser klien akan menerjemahkan halaman html tersebut ke bentuk web.

Persiapan Awal

1. Panggil ftp://www2.ti.usd

2. Login menggunakan nama user anda

a. Klik kanan

b. Pilih Login As

c. Isi user name dan password

d. OK!

3. Buat direktori baru bernama: public_html

a. Klik kanan

b. New Folder

c. Rubah nama folder menjadi public_html

Untuk mencoba website, lakukan langkah berikut:

1. Ketik program html menggunakan notepad

<HTML>

Ini adalah struktur dokumen yang paling sederhana.

</HTML>

2. Simpan dengan nama index.html (huruf kecil semua).

3. Kopi file index.html

4. Panggil ftp://namauser@www2.ti.usd

5. Paste file index.html ke direktori public_html.

6. Panggil http://www2.ti.usd/~namauser

Struktur Dokumen HTML

Struktur dokumen HTML terdiri atas 3 tag utama yaitu tag HTML, HEAD dan BODY. Setiap dokumen HTML dibuka dengan tag <HTML> dan ditutup dengan tag </HTML>. Dokumen HTML juga dapat diberi judul, dengan menggunakan tag <TITLE>. Tag <TITLE> harus berada di dalam tag <HEAD>.

Latihan 1:

1. Ketiklah halaman HTML di bawah ini menggunakan notepad dan simpan sebagai latih1.html

2. Upload latih1.html anda ke website anda.

3. Panggil http://www2.ti.usd/~namauser/latih1.html

<HTML>

<HEAD>

<TITLE> Belajar Buat HomePage </TITLE>

</HEAD>

<BODY>

Selamat Datang di Home Page Saya.

</BODY>

</HTML>

Apa yang terjadi dengan website anda?…………………………….

Pemberian Format Tertentu pada halaman HTML

Heading dan Sub-Heading

Heading adalah sekumpulan kata yang menjadi judul atau sub-judul dalam dokumen HTML dengan berbagai ukuran yang berbeda.

Latihan 2:

1. Ketiklah halaman HTML di bawah ini menggunakan notepad dan simpan sebagai latih2.html

2. Upload latih2.html anda ke website anda.

3. Panggil http://www2.ti.usd/~namauser/latih2.html

<HTML>

<HEAD>

<TITLE> Belajar Buat Heading </TITLE>

</HEAD>

<BODY>

<H1> Heading 1-24 Point </H1> <BR>

<H2> Heading 2-18 Point </H2> <BR>

<H3> Heading 3-14 Point </H3> <BR>

<H4> Heading 4-12 Point </H4> <BR>

<H5> Heading 5-10 Point </H5> <BR>

<H6> Heading 6-7 Point </H6> <BR>

Normal teks body – 12 point

</BODY>

</HTML>

Latihan 3:

1. Ketiklah halaman HTML di bawah ini menggunakan notepad dan simpan sebagai latih3.html

2. Upload latih3.html anda ke website anda.

3. Panggil http://www2.ti.usd/~namauser/latih3.html

<HTML>

<HEAD>

<TITLE> Belajar Buat Heading </TITLE>

</HEAD>

<BODY>

<H1 align=”center” > Heading 1-24 Point </H1> <BR>

<H2 align=“right” > Heading 2-18 Point </H2> <BR>

<H3 align=”left” > Heading 3-14 Point </H3> <BR>

<H4> Heading 4-12 Point </H4> <BR>

<H5> Heading 5-10 Point </H5> <BR>

<H6> Heading 6-7 Point </H6> <BR>

Normal teks body – 12 point

</BODY>

</HTML>

Paragraph

Paragraph dinyatakan dengan tag <P>. Setiap teks yang diawali dengan tag <P> akan meyebabkan teks tersebut ditempatkan pada garis baru.

Latihan 4:

1. Ketiklah halaman HTML di bawah ini menggunakan notepad dan simpan sebagai latih4.html

2. Upload latih4.html anda ke website anda.

3. Panggil http://www2.ti.usd/~namauser/latih4.html

<HTML>

<HEAD>

<TITLE> Belajar Buat Heading </TITLE>

</HEAD>

<BODY>

<P>

Ini adalah paragraph pertama dari tiga buah paragraph yang akan kita buat. Pada paragraph pertama ini kita tidak menggunakan tag akhir tetapi langsung memasukkan tag awal untuk mengakhiri paragraph pertama.

<P>

Sedangkan pada paragraph kedua ini kita menggunakan tag awal dan akhir untuk mengakhiri suatu paragraph.

</P>

<P>

Perhatikan kedua contoh paragraph diatas.

</P>

</BODY>

</HTML>

Latihan 5:

1. Ketiklah halaman HTML di bawah ini menggunakan notepad dan simpan sebagai latih5.html

2. Upload latih5.html anda ke website anda.

3. Panggil http://www2.ti.usd/~namauser/latih5.html

<HTML>

<HEAD>

<TITLE> Belajar Buat Heading </TITLE>

</HEAD>

<BODY>

Menggunakan atribut align dengan nilai center, untuk posisi rata tengah.

Menggunakan atribut align dengan nilai right, untuk posisi rata kanan.

</P>

<P>

Menggunakan atribut align dengan nilai left, untuk posisi rata kiri.

</P>

</BODY>

</HTML>

Fungsi BREAK dan HR (Horizontal Rule)

Line break <BR> adalah tag yang berguna untuk membuat baris baru pada sebuah dokumen HTML. Tag ini adalah tag tunggal, tidak ada tag penutup. HR atau horizontal rule adalah tag yang berguna untuk membuat garis horisontal. Tag <HR> ini akan menciptakan garis horisontal sepanjang jendela browser.

Latihan 6:

1. Ketiklah halaman HTML di bawah ini menggunakan notepad dan simpan sebagai latih6.html

2. Upload latih6.html anda ke website anda.

3. Panggil http://www2.ti.usd/~namauser/latih6.html

<HTML>

<HEAD>

<TITLE> Belajar Break dan Horizontal Rule </TITLE>

</HEAD>

<BODY>

<P>

Belajar menggunakan break dan horisontal rule

<P>

Baris ini akan dipotong <BR> untuk membuat garis baru <BR>

Seperti teks ini

</P>

<P>

</P>

</BODY>

</HTML>

Bentuk Teks: Bold, Italic, Strike, dll

Tag fisik teks yang umum digunakan:

· <B> …… </B> Untuk menebalkan teks

· <U> …… </U> Untuk membuat garis bawah teks

· <I> ……. </I> Untuk menampilkan teks miring

· <S> …… </S> Untuk memberikan coretan pada teks

· <SUB> …….. </SUB> Untuk membuat teks Subscript

· <SUP> …….. </SUP> Untuk membuat teks Superscript

· <SMALL> ………. </SMALL> Mengecilkan teks

· <BIG> ………… </BIG> Membesarkan teks

Latihan 7:

1. Ketiklah halaman HTML di bawah ini menggunakan notepad dan simpan sebagai latih7.html

2. Upload latih7.html anda ke website anda.

3. Panggil http://www2.ti.usd/~namauser/latih7.html

<HTML>

<BODY>

<B> Teks ini menggunakan tag <B>…. </B> </B> <BR>

<U> Teks ini menggunakan tag <U>…. </U> </U> <BR>

<I> Teks ini menggunakan tag <I>…. </I> </I> <BR>

<S> Teks ini menggunakan tag <S>…. </S> </S> <BR>

tag <SUB>…. </SUB> menampilkan teks H<SUB>2</SUB>O <BR>

tag <SUP>…. </SUP> menampilkan teks H<SUP>2</SUP>O <BR>

<SMALL> Teks ini menggunakan tag <SMALL>…. </SMALL> </SMALL> <BR>

<BIG> Teks ini menggunakan tag <BIG>…. </BIG> </BIG> <BR>

<B> <U> Teks ini menggunakan tag <B> <U>…. </U> </B></U> </B> <BR>

</BODY>

</HTML>

Kumpulan chord gitar

Halaman

Sabtu, 23 Juni 2012

Modul PHP I

Landasan Teori

Tidak ada komentar: