pelatihan website diskominfo kukar

HARI KE – I

WEBSITE DAN HTML

1.1. Pengertian Website

Web merupakan terobosan baru sebagai teknologi sistem informasi yang

menghubungkan data dari banyak sumber dan layanan yang beragam macamnya di internet.

Situs web (website) awalnya merupakan suatu layanan sajian informasi yang menggunakan

konsep hyperlink, yang memudahkan surfer (sebutan bagi pemakai komputer yang melakukan

penelusuran informasi di internet).

Web cepat sekali populer di lingkungan pengguna internet, karena kemudahan yang

diberikan kepada pengguna internet untuk melakukan penelusuran, penjelajahan, dan

pencarian informasi (dikenal dengan istilah surfing internet). Informasi yang disajikan dengan

web menggunakan konsep multimedia, informasi dapat disajikan dengan menggunakan

banyak media (teks, gambar, animasi, suara (audio), dan atau film).

Suatu situs web akan dikenal dengan cepat apabila informasi yang disajikannya selalu

up to date dan atau lengkap. Tetapi keuptodate-an dan kelengkapan data merupakan masalah

besar bagi pengelola situs. Karena kerepotan untuk melakukan penambahan atau pengubahan

data yang akan disajikan. Jika situs tidak di rancang dengan sistematis, maka akan terjadi

kesulitan dan kerepotan untuk melakukan maintenance untuk update dan melengkapi data

(Sidik, 2006).

Sebuah halaman web dapat diakses dengan cara menuliskan URLnya atau mengikuti

link yang menuju kepadanya, menggunakan browser web. Berikut cara kerja web, diantaranya

adalah (Angga, 2010):

1. URL menunjukan lokasi dokumen yang dikelola oleh sebuah server web.

2. URL diubah menjadi alamat Internet Protocol (IP) server web yang bersangkutan.

3. Browser kemudian mengirimkan request http ke server web.

4. Server web akan menjawab dengan memberikan dokumen yang diminta dalam format

HTML.

1.2. HyperText Transfer Protocol

Hypertext Transfer Protocol (HTTP) adalah sebuah protokol jaringan lapisan aplikasi

yang digunakan untuk sistem informasi terdistribusi, kolaboratif, dan menggunakan

hipermedia. Penggunaannya banyak pada pengambilan sumber daya yang saling terhubung

dengan tautan, yang disebut dengan dokumen hypertext, yang kemudian membentuk World

Wide Web pada tahun 1990 oleh fisikawan Inggris, Tim Berners-Lee. Hingga kini, ada dua

versi mayor dari protokol HTTP, yakni HTTP/1.0 yang menggunakan koneksi terpisah untuk

setiap dokumen, dan HTTP/1.1 yang dapat menggunakan koneksi yang sama untuk

melakukan transaksi. Dengan demikian, HTTP/1.1 bisa lebih cepat karena tidak perlu

membuang waktu untuk pembuatan koneksi yang berulang-ulang.

Pengembangan standar HTTP telah dilaksanakan oleh Konsorsium World Wide Web

(World Wide Web Consortium/W3C) dan juga Internet Engineering Task Force (IETF), yang

berujung pada publikasi beberapa dokumen Request for Comments (RFC), dan yang paling

banyak dirujuk adalah RFC 2616 (yang dipublikasikan pada bulan Juni 1999), yang

mendefinisikan HTTP/1.1.

Gambar Arsitektur protokol HTTP

Sumber: http://www.codetoad.com/asp.net/aspnetcontrols2.asp

HTTP adalah sebuah protokol meminta/menjawab antara client dan server. Sebuah

client HTTP (seperti web browser atau robot dan lain sebagainya), biasanya memulai

permintaan dengan membuat hubungan ke port tertentu di sebuah server Web hosting tertentu

(biasanya port 80). Klien yang mengirimkan permintaan HTTP juga dikenal dengan user

agent. Server yang meresponnya, yang menyimpan sumber daya seperti berkas HTML dan

gambar, dikenal juga sebagai origin server. Di antara user agent dan juga origin server, bisa

saja ada penghubung, seperti halnya proxy, gateway, dan juga tunnel (Rhomadona, 2010).

Gambar Arsitektur Web Server (Zalee, 2010)

1.3. Konten Minimal Situs Pemerintah Daerah

Setiap pemeritahan daerah memiliki kebutuhan masing-masing dalam mengatur konten

yang akan dimuat dalam situsnya, namun dalam tidak dapat diabaikan standar minimum

konten yang harus dipenuhi agar informasi tentang pemerintahan dapat tersampaikan melalui

website. Berikut standar minimal yang diperlukan dalam pengaturan konten website :

1. Selayang pandang

Menjelaskan secara singkat tentang keberadaan Pemerintah Daerah bersangkutan

(sejarah, motto daerah, lambing dan arti lambing, lokasi dalam bentuk perta, visi dan misi)

2. Pemerintahan Daerah

Mejelaskan struktur organisasi yang ada di Pemerintah Daerah bersangkutan (eksekutif,

legislative) beserta nama, alamat, telepon, e-mail dari pejabat daerah. Jika memungkinkan

biodata dari pimpinan daerah ditampilkan agar masyarakat luas mengetahuinya.

3. Geografi

Menjelaskan Antara lain tentang keadaan topografi, demografi, cuaca dan iklim, social

dan ekonomi, budaya dari daerah bersangkutan. Semua data dalam bentuk numeris dan

statistic harus mencantumkan nama instansi dari sumber datanya.

4. Peta Wilayah dan Sumberdaya

Menyajikan batas adminstrasi wilayah dalam bentuk peta wilayah (sebaiknya digunakan

peta referensi yang dikeluarkan oleh Badan Koordinasi Survei dan Pemetaan Nasional –

Bakosurtanal, atau instansi pemerintaha lainnya yang mempunyai tugas pokok dan fungsi

pembuatan peta), dan juga sumberdaya yang dimiliki oleh daerah bersangkutan dalam

bentuk peta sumberdaya (digunakan peta refernsi yang dikeluarkan oleh instansi pemerintah

yang mempunyai tugas pokok dan fungsi pembuatan peta) yang dapat digunakan untuk

keperluan pengguna.

5. Peraturan/Kebijakan Daerah

Menjelaskan Peraturan Daerah (Perda) yang telah dikeluarkan oleh Pemerintah Daerah

bersangkutan. Melalui situs web pemerintah daerah iniliah semua perda yang telah

dikeluarkan dapat disosialisasikan kepada masyarakat luas.

6. Buku Tamu

Tempat unutk menerima masukkan dari pengguna situs pemerintaha daerah

bersangkutan.

(Sulistiyo, 2008).

1.4. Memulai HTML

HTML adalah bahasa yang sangat tepat dipakai untuk menampilkan informasi pada

halaman Web karena HTML menampilkan informasi dalam bentuk hypertext dan juga

mendukung sekumpulan perintah yang dapat digunakan untuk mengatur tampilnya informasi

tersebut.

Sesuai dengan namanya, bahasa ini menggunakan tanda (markup) untuk menandai

perintah-perintahnya. Saat ini banyak sekali aplikasi yang dapat digunakan untuk membuat

Web Page secara mudah, seperti Adobe Dreamweaver, Java Netbeans dan lainnya. Namun

demikian untuk seorang Web Developer harus memiliki kemampuan dasar menguasi perintah

HTML.

Untuk dapat menggunakan HTML, Anda membutuhkan beberapa hal, diantaranya

adalah:

1. Anda memerlukan teks editor untuk mengetikkan HTML Anda. Klik Start | Program

kemudian Accessories lalu pilih Notepad++.

2. Anda membutuhkan sebuah web browser untuk mempublikasikan HTML Anda. Anda

dapat menggunakan Microsoft Internet Explorer, Mozilla Firefox atau Google Chrome.

3. Anda membutuhkan tempat penyimpanan. Gunakan hard disk, floppy disk, atau web

server. Anda tidak harus bekerja online dengan internet, Anda dapat menulis HTML

kemudian menggunakan web browser secara offline di komputer.

1.4.1. Struktur Dokumen HTML

Di bawah ini adalah struktur dari dokumen HTML , buka Notepad++ kemudian

ketikkan teks di bawah ini:

<HTML>

<HEAD>

<TITLE>contoh1.htm</TITLE>

</HEAD>

<BODY>

Kepala atau kop dokumen

<p>

Isi dokumen

</BODY>

</HTML>

Setelah selesai klik menu “File” menu dan pilih “Save As” . Akan muncul kotak

Save yang akan menyimpan dokumen Anda. Lalu ketikkan contoh1.htm . Pada kotak yang

paling bawah Anda dapat melihat “Save file as Type” or “Save as Type”. Defaultnya adalah

.txt, jadi Anda harus mengubahnya ke All Files(*.*). Lalu Anda dapat mengklik Save.

Buka Mozilla Firefox dengan mengklik Start, Program lalu pilih Mozilla Firefox.

Mozilla Firefox akan terbuka lalu Anda dapat memilih menu File, Open lalu cari lokasi file di

tempat penyimpanan Anda.

Struktur di atas diapit oleh tag <HTML> dan </HTML> yang menandai awal dan akhir

dari sebuah dokumen yang digunakan untuk menyisipkan informasi mengenai dokumen,

misalkan versi, revisi dan sebagainya. Sedangkan bagian yang diapit oleh tag <TITLE> dan

</TITLE> menunjukkan judul dari halaman web Anda. Bagian kedua yang diapit <BODY>

dan </BODY> berisi dokumen atau informasi yang hendak disajikan.

1.4.2. Headings

Heading digunakan untuk menampilkan nama bab atau bagian tertentu yang dianggap

sebagai topik utama. Pada HTML terdapat enam level heading mulai dari tag <H1> sampai

dengan <H6>. Anda juga dapat menggunakan tag untuk mengatur ukuran font, misalkan yang

terbesar dengan <H1> atau membuatnya paling kecil dengan <H6> namun tag ini bukan

digunakan untuk keperluan tersebut.

1. Mengatur Posisi Heading

Posisi heading pada dokumen HTML dapat Anda tentukan sendiri. Artinya teks yang

berfungsi sebagai heading dapat Anda tempatkan di kiri, kanan, atau di tengah dalam

dokumen.Untuk mengatur posisi heading, Anda dapat menggunakan atribut ALIGN pada

tag heading. Nilai dari atribut ALIGN dapat diisi dengan salah satu nilai, left untuk perataan

sebelah kiri, right untuk perataan sebelah kanan, atau center untuk menuliskannya tepat di

tengah.

Berikut ini adalah contoh penulisan atribut align pada tag heading:

<HTML>

<HEAD>


</HEAD>

<BODY>

<H1 Align=“Left”> Heading rata kiri </H1><BR>

<H2 Align=“Right”> Heading rata kanan </H2><BR>

<H4 Align=“Center”> Heading rata tengah </H4>

</BODY>

</HTML>

2. Membuat Baris Baru

Line break <BR> adalah tag yang berfungsi untuk membuat baris baru pada

dokumen HTML tag <BR> ini membuat baris baru tanpa memberi baris kosong.

3. Membuat Garis Horizontal

Horizontal Rule <HR> adalah tag tunggal yang berfungsi untuk membuat garis

horizontal. Tag <HR> akan memberikan garis horizontal sepanjang baris kosong.

4. Membuat Daftar/List

Untuk membuat daftar atau list, HTML menyediakan empat macam list, yaitu :

a. Unordered List

Unordered list biasanya ditandai dengan pemakaian bullet untuk menandai sebuah

item dari list. Bullet adalah karakter tertentu yang berupa karakter symbol, misalkan bullet

dengan bentuk tanda panah, rumah, segitiga, dan sebagainya.

Untuk membuat list dengan menggunakan sebuah bullet di gunakan tag <UL>

(unordered list) sebagai tanda tag awal dan </UL> sebagai tanda tag penutup. Untuk item-

item di dalam list harus diawali dengan tag <LI> dan tidak memerlukan tanda akhir tag.

Untuk lebih jelasnya Anda dapat mengetikkan contoh sebagai berikut:

<HTML>

<HEAD>

<TITLE> contoh3.htm</TITLE>

</HEAD>

<BODY>

<UL>

<LI>MS-Word

<LI>MS-Excel

<LI>MS-Access

<LI>MS-PowerPoint

</UL>

</BODY>

Bentuk default tanda item dalam tag <UL> adalah bullet. Untuk mengubah Anda dapat

menggunakan atribut TYPE dengan diikuti nilai kontanta. Konstanta ini mewakili karakter

symbol yang akan digunakan.

b. Ordered List

Ordered list adalah daftar yang tiap bagiannya disertai dengan penomoran. Ordered

list dimulai dengan tag <OL> dan diakhiri dengan tag </OL>. Perhatikan contoh berikut:

<HTML>

<HEAD>


</HEAD>

<BODY>

<OL TYPE=I START=3>

<LI TYPE=1>MS-Word

<LI TYPE=A>MS-Excel

<LI>MS-Access

<LI TYPE=i>MS-PowerPoint

<LI>MS-PhotoDraw

</OL>

</BODY>

</HTML>

Ordered list mempunyai beberapa tipe penomoran yang dapat digunakan, yaitu:

1 ⇒ 1,2,3….

A ⇒ A,B,C,….

A ⇒ a,b,c,….

I ⇒ I,II,III,….

i ⇒ i,ii,iii,….

Apabila Anda menuliskan atribut TYPE pada tag <OL> maka tipe tersebut akan

dipakai sebagai default dari seluruh item. Namun Anda juga dapat memberikan tipe untuk

masing-masing item, yaitu dengan memberikan atribut TYPE pada tag <LI>. Atribut

START dipakai pada tag <OL> dan digunakan untuk menentukan nomor dari item

pertama.

c. Definition List

Definition list adalah daftar yang mempunyai keterangan pada itemnya. Untuk

memakai defenition list Anda dapat menggunakan pasangan tag <DL> dan </DL>. Tag ini

bekerja dibantu oleh tag lainnya, yaitu tag <DT> yang menandakan item yang dijelaskan

dan tag <DD> menyatakan defenisi dari item. Perhatikan contoh berikut

<HTML>

<HEAD>


</HEAD>

<BODY>

<DL>

<DT>MS-PowerPoint<DD>Merupakan program pengolah kata dari Microsoft.

<DT>MS-Excel<DD>Merupakan program Spreadsheet.

<DT>MS-Access<DD>Merupakan program Database.

</DL>

</BODY>

</HTML>

d. Daftar Menu

Untuk membuat daftar menu Anda dapat menggunakan pasangan tag <MENU> dan

</MENU> seperti yang di tunjukkan pada contoh:

<HTML>

<HEAD>


</HEAD>

<BODY>

<MENU>

<LI>MS-Word

<LI>MS-Excel

<LI>MS-Access

</MENU>

</BODY>

</HTML>

5. Membuat Paragraf

Anda dapat mulai meletakkan informasi Anda pada halaman web. Untuk

keperluan ini HTML menyediakan tags <P>. Perintah ini mempunyai beberapa atribut.

Tag <P> umumnya untuk menandai suatu paragraf baru. Anda juga dapat

menggunakan tag <BR> untuk memulai baris baru, namun pemakaian tag <P> terutama

digunakan untuk membuat group paragraf dengan formatting style tertentu. Berikut ini

adalah contoh paragraph pada HTML.

<HTML>

<HEAD>


</HEAD>

<BODY>

<P ALIGN=“center”>

Keberhasilan Microsoft dalam memasarkan produknya dapat diacungkan

jempol, dibuktikan dengan banyak perusahaan yang menggunakan

produknya.

<P ALIGN=“right”>

Salah satunya adalah Microsoft Word yang menjadi standar pengolah

kata di banyak perusahaan.

<P ALIGN=“left”>

Microsoft Word dilengkapi dengan banyak feature untuk memudahkan

penggunanya.

</P>

</BODY>

</HTML>

Sama halnya dengan tag heading, tag paragraf <P> memiliki atribut untuk mengatur

alignment atau pengatur posisi, yaitu left untuk meratakan paragrap di kiri, right untuk

perataan sebelah kanan, dan center untuk meletakkan pada posisi tengah horizontal.

6. Mengatur Huruf

Untuk mengatur huruf pada HTML anda dapat menggunakan tag <FONT> dan tag

penutup </FONT>. Tag ini mempunyai beberapa atribut untuk mengatur formatting style dari

suatu teks.

a. Ukuran font

Size=n adalah atribut yang digunakan untuk mengatur besarnya ukuran font. Nilai n

berkisar antara 0 (ukuran terkecil) sampai dengan yang terbesar 7. Contoh berikut akan

menampilkan tulisan dalam berbagai ukuran seperti pada gambar berikut.

<HTML>

<HEAD>


</HEAD>

<BODY>

<FONT SIZE=1> Font Size 1</FONT><BR/>







</BODY>

</HTML>

b. Jenis Font

Untuk mengatur jenis font Anda dapat menggunakan atribut face dengan sintaksis

face=string. Nilai string berupa string yang menunjukkan nama font dan biasa lebih dari satu.

c. Warna Font

Untuk mengatur warna font Anda dapat menggunakan atribut color dengan sintaksis

color= #RRGGBB. Nilai RRGGBB adalah kombinasi angka dalam bilangan hexa yang

menunjukkan kapasitas warna merah (RR), hijau (GG), dan biru (BB).

Anda juga dapat menggantikan #RRGGBB dengan konstanta warna yang ada pada

browser seperti ditunjukan oleh tabel 3.1 di bawah ini.

Black White Green Maroo

Olive Red Navy Yellow Purple Blue Gray

Lime Aqua Fuchsia Teal

Tabel 3.1 Konstanta warna pada HTML

7. Menghubungkan ke Halaman Web Lain

Untuk menghubungkan halaman web Anda dengan halaman lainnya, HTML

menyediakan pasangan tag <A> dan </A> pemakaian tag ini yang diikuti dengan atribut

HREF akan memungkinkan halaman web Anda terhubung ke halaman web lainnya seperti

pada contoh berikut:

Ini adalah link ke <A HREF=http://www.yahoo.com> Your Searching Web </A>

Anda juga dapat melakukan link ke bagian lain dari halaman web caranya

menandai suatu daerah dengan memberikan atribut NAME pada tag <A>, misalkan:

<A NAME=“Tanda1”>Bagian ini akan ditandai.</A>

Kemudian untuk membuat link ke bagian tersebut, berikan kode seperti berikut:

<A HREF=“#Tanda1”>Menuju ke bagian yang ditandai.</A>

8. Menampilkan Gambar

Gambar adalah elemen yang sangat penting dalam menampilkan informasi. HTML

menyediakan tag <IMG> untuk menampilkan gambar pada halaman web Anda.

<IMG SRC=“gambar1.gif” ALT=“gambar1”>

Perintah HTML diatas akan menampilkan gambar gambar1.gif dan menampilkan

teks “gambar 1” apabila browser mematikan fasilitas penampil grafik. Ekstensi grafik

yang biasa di tampilkan oleh HTML adalah GIF, JPG, dan BMP. Anda juga dapat

http://www.yahoo.com/

menggabungkan grafik dengan tag <A> untuk membuat link dari gambar Anda.

<IMG SRC=“gambar1.gif” ALT=“gambar1” HREF=“www.yahoo.com”>

Atribut ALT dipakai untuk menampilkan teks pengganti gambar untuk browser yang

tidak mendukung penggunaan gambar atau apabila client sengaja mematikan fasilitas tersebut.

Anda juga dapat menggunakan atribut align untuk mengatur posisi gambar terhadap

teks yang bersebelahan. Perhatikan contoh berikut :

<HTML>

<HEAD>


</HEAD>

<BODY>

<H1>Pelatihan Situs Web Bisnis</H1>

<BR>Pergi ke web site <IMG SRC=“sample.gif” ALIGN=“MIDDLE”> <A

HREF=“www.pelatihan.com”>Pelatihan Situs Web Bisnis</A>

</BODY>

</HTML>

Pada contoh HTML di atas, align untuk gambar adalah tengah. Anda dapat

mencobanya untuk align dan align bottom untuk membandingkannya. Dengan menambahkan

atribut HSPACE dan VSPACE, Anda dapat mengatur frame yang mengelilingi gambar.

<HTML>

<HEAD>


</HEAD>

<BODY>


<BR>Pergi ke web site <IMG SRC=“sample.gif” ALIGN=“MIDDLE” HSPACE=13

VSPACE=13> <A HREF=“www.pelatihan.com”>Pelatihan Situs Web

Bisnis</A>

</BODY>

</HTML>

Bila dirasa gambar Anda terlalu kecil atau terlalu besar, Anda dapat menentukan

sendiri lebar dan panjang gambar mengatur property WIDTH dan HEIGHT pada tag <IMG>.

<HTML>

<HEAD>


</HEAD>

<BODY>


<BR>Pergi ke web site <IMG SRC=“sample.gif” ALIGN=“MIDDLE” WIDTG=50

HEIGHT=50> <A HREF=“www.Pelatihan.com”>Pelatihan Situs Web

Bisnis</A>

</BODY>

</HTML>

http://www.yahoo.com/

http://www.pelatihan.com/




9. Tabel

Tabel adalah sarana untuk menempatkan informasi agar mudah dibaca dan dipahami.

Untuk memahami pembuatan tabel pada HTML, Anda dapat melihat skrip dibawah ini.

<HEAD>


</HEAD>

<BODY>

<TABLE BORDER=1>

<TR>

<TD>Sel 1,1</TD>

<TD>Sel 1,2</TD>

</TR>

<TR>

<TD>Sel 2,1</TD>

<TD>Sel 2,1</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Tag <TABLE> memiliki banyak atribut diantaranya adalah BORDER. BORDER

digunakan untuk mengatur ketebalan garis pembatas antar sel-sel dalam tabel. Atribut lainnya

yang penting adalah :

a. Width : Atribut width menyatakan lebar tabel. Apabila dinyatakan dalam persen (%),

maka lebar ditentukan dalam persentase terhadap lebar layar browser.

b. Cellspacing : Atribut cellspacing menyatakan jarak antara sel satu dan lainnya.

c. Cellpading : Atribut cellpading menyatakan jarak antara isi sel dengan batas dari sel

tersebut.

Untuk membuat baris pada tabel, HTML menyediakan pasangan tag <TR> untuk awal

baris dan </TR> untuk mengakhirinya. Tag <TR> memiliki atribut ALIGN untuk mengatur

alignment horizontal dan VALIGN untuk mengatur alignment vertical. Setelah Anda

membuat kolom pada baris yang bersangkutan dengan menggunakan garis pasangan tag

<TD> dan </TD>.

Dalam membuat suatu tabel, Anda juga dapat mengatur lebar untuk tabel dan juga

masing-masing kolomnya dengan menggunakan atribut WIDTH.

</HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE BORDER=1 WIDTH=“80%”>

<TR>

<TD WIDTH=“70%”>Sel 1,1</TD>

<TD WIDTH=“30%”>Sel 1,2</TD>

</TR>

<TR>

<TD>Sel 2,1</TD>

<TD>Sel 2,1</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Atribut cellspacing digunakan untuk mengatur jarak atau spasi antar sel dengan sel

lainnya dan antar sel dengan batas tabel. Sedangkan atribut cellpading digunakan untuk

mengatur spasi antara batas sel dengan teks di dalam sel.

Contoh penggunaan atribut cellspacing dan cellpading diperlihatkan pada gambar

dan skrip berikut ini.

<HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE BORDER=1 WIDTH=“80%” CELLSPACING=10

CELLPADDING=20>

<TR>

<TD WIDTH=“85%”>Penggunaan Internet

menjadi utama dalam kegiatan

perusahaan</TD>

<TD WIDTH=“15%”>-</TD>

</TR>

<TR>

<TD>Perusahaan banyak memanfaatkan e-mail

sebagai komunikasi mereka.</TD>

<TD>-</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Atribut rowspan digunakan untuk menggabungkan beberapa buah baris menjadi satu.

Sedangkan atribut colspan digunakan untuk menggabungkan beberapa kolom menjadi satu.

Atribut-atribut ini di pakai berdasarkan tag <TD>. Perhatikan contoh tersebut:

<HTML>

<HEAD>


</HEAD>

<BODY>

<TABLE BORDER=1>

<TR>

<TD COLSPAN=2>Sel 1,1</TD>

<TD>Sel 1,2</TD>

<TD>Sel 1,3</TD>

</TR>

<TR>

<TD ROWSPAN=3>Sel 2,1</TD>

<TD>Sel 2,1</TD>

<TD>Sel 2,2</TD>

<TD>Sel 2,3</TD>

</TR>

<TR>

<TD>Sel 3,1</TD>

<TD>Sel 3,2</TD>

<TD>Sel 3,3</TD>

</TR>

</TABLE>

</BODY>

</HTML>

10. Form

Form digunakan untuk membuat formulir di halaman web. Seperti namanya, form

digunakan untuk mengambil input dari user dan akan diolah lebih lanjut.

Form pada halaman web didefinisikan dengan pasangan tag <FORM> dan </FROM>.

Tag <FORM> memiliki dua atribut yang penting, yaitu atribut METHOD untuk menentukan

bagaimana form diberlakukan, dan atribut ACTION yang sering diisikan URL tepat

pemrosesan form selanjutnya. Struktur dasar form adalah :

<FORM [METHOD=“[POST|GET]”ACTION=“URL”]>

…

…

</FORM>

a. Input Box

Input box adalah inputan pada form yang memungkinkan user memasukkan string

dalam satu baris. Untuk membuat input box, HTML menyediakn tag <INPUT> dan

memanfaatkan atribut TYPE=“Text”.

Atribut pada tag <INPUT> lainnya adalah NAME untuk menyatakan nama dari input

tersebut, VALUE untuk menyatakan nilai dari suatu input, dan SIZE untuk menyatakan

panjang sebuah input.

Bila Anda ingin agar apa yang diketik oleh user disembunyikan dengan hanya

menampilkan karakter *, maka Anda dapat menggantikan hasil atribut TYPE menjadi

“Password”.

<HTML>

<HEAD>


</HEAD>

<BODY>

<FORM>

<TABLE>

<TR>

<TD>Nama :</TD>

<TD><INPUT TYPE=“Text” NAME=“varNama” VALUE=“Andy Kurniawan”

SIZE=“15”></TD>

</TR>

<TR>

<TD>Alamat :</TD>

<TD><INPUT TYPE=“Text” NAME=“varAlamat” SIZE=“30”></TD>

</TR>

<TR>

<TD>Password :</TD>

<TD><INPUT TYPE=“Password” NAME=“varKota” SIZE=“10”></TD>

</FORM>

</BODY>

b. Radio Button

Bila atribut TYPE pada tag <INPUT> Anda ganti dengan “Radio” maka Anda

sudah mendefenisikan sebuah radio button. Coba tambahkan baris berikut ini pada

contoh16.htm.

Jenis Kelamin:

<INPUT CHECKED TYPE=“Radio” NAME=“Kelamin” VALUE=“Pria”>Pria

<INPUT TYPE=“Radio” NAME=“Kelamin” VALUE=“Wanita”>Wanita

Perhatikan contoh HTML di atas. Anda akan menemukan bahwa pada input type radio

button terdapat atribut CHECKED. Atribut ini menandakan bahwa radio button tersebut

diaktifkan. Pada radio button Anda hanya bisa mengaktifkan satu pada satu saat.

c. Checked Box

Berbeda dengan radio button yang hanya memungkinkan user memilih satu pilihan,

pada input type checked box Anda dapat memilih satu atau beberapa pilihan, atau tidak

memilih sama sekali. Pilihan ini biasanya dipakai untuk memasukkan data yang sifatnya

opsional. Anda dapat menggunakan “Checkbox” pada atribut <INPUT>.

d. Button

Anda dapat membuat dua macam tombol pada form HTML. Yang pertama dengan

memberikan “Submit” pada atribut TYPE atau dengan menggunakan atribut “reset”.

Submit digunakan untuk melakukan action pada tag <FORM>. Sedangkan reset

digunakan untuk menghapus nilai pada seluruh isi form. Sekarang tambahkan HTML

ini pada contoh16.htm.

<Input Type=“Submit” Value=“Send Info”>

<Input Type=“Reset” Value=“Clear

form”>

Kemudian agar HTML dapat melanjutkan ke proses berikutnya pada tombol bertipe

submit ditekan, ganti tag <FORM> dengan:

<FORM METHOD=“POST” ACTION=“Contoh23.html”>

Kode HTML untuk contoh form secara lengkap adalah sebagai berikut: <HTML>

<HEAD>


</HEAD>

<BODY>

<FORM METHOD=“POST” ACTION=“contoh18.htm”>

<TABLE>

<TR>

<TD>Nama :</TD>

<TD><INPUT TYPE=“Text” NAME=“varNama” VALUE=“Andy Kurniawan”

SIZE=“15”></TD>

</TR>

<TR>

<TD>Alamat :</TD>

<TD><INPUT TYPE=“Text” NAME=“varAlamat” SIZE=“30”></TD>

</TR>

<TR>

<TD>Password :</TD>

<TD><INPUT TYPE=“Password” NAME=“varPassword” SIZE=“10”></TD>

</TR>

</TABLE>

Jenis kelamin:

<INPUT CHECKED TYPE=“Radio” NAME=“Kelamin” VALUE=“Pria”>Pria

<INPUT TYPE=“Radio” NAME=“Kelamin” VALUE=“Wanita”>Wanita

<BR><BR> Hobi:<BR>

<INPUT TYPE=“Checkbox” NAME=“Kelamin” VALUE=“Soccer”>Sepakbola

<INPUT CHECKED TYPE=“Checkbox” NAME=“Hobi” VALUE=“Badminton”>Bulutangkis

<INPUT TYPE=“Checkbox” NAME=“Hobi” VALUE=“Computer”>Komputer

<BR>

<INPUT TYPE=“Checkbox” NAME=“Hobi” VALUE=“Game”>Permainan video

<INPUT CHECKED TYPE=“Checkbox” NAME=“Hobi” VALUE=“Internet”>Internet

<INPUT TYPE=“Submit” VALUE=“Send info”>

<INPUT TYPE=“Reset” VALUE=“Clear form”>

</FORM>

</BODY>

</HTML>

HARI KE – II

CSS DAN JAVASCRIPT

2.1. KONSEP CSS

Apa itu CSS :

Feature untuk membuat dynamic HTML.

Style sheet mendeskripsikan bagaimana tampilan document HTML di layar

(template)

Membuat special efek (mendefinisikan style untuk <H1> dengan style bold dan italic

dan berwarna biru)

Support ke semua browser.

Aturan penulisan :

Nilai untuk property tidak boleh dalam tanda petik.

contoh : color : green;

Nama property bersifat case sensitive.

color : green;

property : color

value : green

Cara penggunaan CSS :

External Style Sheet

Bentuk :

<link rel=“stylesheet” type=“text/css” href=“css_files.css”>

dimana :

<link, merupakan tag pembuka diakhiri dengan tanda “>“

rel=“stylesheet”, menerangkan halaman ini akan dikenai efek style sheet

type=“text/css”, file yang dipanggil berupa css

href=“css_files.css”, alamat dokumen stylesheet yang dipanggil

Contoh Penggunaan :

script efek.css

body {

color: green;

background: white;

font-family : arial;

}

script css1.htm

<HTML>

<HEAD>

<TITLE>diskominfo</TITLE>

<LINK REL=“STYLESHEET”

TYPE=“text/css” HREF=“efek.css”>

</HEAD>

<BODY>

<H1>PENS ITS</H1>

<P> Uji coba penggunaan css eksternal. </P>

</BODY>

</HTML>

Internal Style Sheet

Bentuk umum :

<style type=“text/css”>

…definisi style…

</style>

Contoh Penggunaan :

<HTML>

<HEAD>

<TITLE>centranet</TITLE>

<STYLE type=“text/css”>

body {

color: white;

background: green;

font-family : arial;

}

</STYLE>

</HEAD>

<BODY>

<H1>JUDUL TULISAN</H1>

<P> Uji coba penggunaan css internal. </P>

</BODY>

</HTML>

Inline Style sheet

Contoh Penggunaan :

<HTML>

<HEAD>

<TITLE>centranet</TITLE>

</HEAD>

<BODY style=“color: white;

background: green;

font-family : arial;” >

<H1>JUDUL TULISAN</H1>

<P> Uji coba penggunaan css inline. </P>

</BODY>

</HTML>

2.2. ATURAN PENULISAN PADA CSS

Syntaxis CSS dibagi dalam 3 bagian :

selector {property : value}

dimana :

selector : tag HTML yang akan didefinisikan (body, H1, Link , dll).

property : atribut/tag yang akan diubah

value : nilai dari sebuah property

Cara penulisan :

FONT-FAMILY : sans-serif;

FONT-SIZE : small;

Cara penulisan yang salah :

FONT-FAMILY : “sans-serif”;

FONT-SIZE : ‘small’;

Cara mendeklarasikan kelompok : (tanda koma serta &)

H1, H2 {color : green};

H3, H4 & H5 {color : red};

Cara menuliskan komentar :

Menggunakan tanda : /* ….. */

Menggunakan tanda : <!-- - - >

Bentuk ukuran :

Ukuran Keterangan

em Untuk menentukan ukuran yang pecahan (desimal)

ex x-height, digunakan untuk menentukan ukuran yang

sifatnya vertikal

px Pixels, menentukan ukuran yang bersifat pixel (layar

monitor) seperti ukuran huruf.

2.3. SELECTOR SEBAGAI PENGONTROL DESIGN

1. Selector untuk merubah body.

<HTML>

<HEAD>

<TITLE> Selector </TITLE>


body

{

FONT-FAMILY: Geneva, Arial;

FONT-SIZE: 20px;

color: red;

BACKGROUND-COLOR: green;

}

</style>

</HEAD>

<BODY>

Halaman efect CSS

</BODY>

</HTML>

2. Jenis-jenis selector

a. Selector bebas <HTML>

<HEAD>



gbawah{

TEXT-DECORATION: underline;

}

</style>

</HEAD>

<BODY>

<gbawah> Efect Garis Bawah dengan Selector Bebas </gbawah>

</BODY>

</HTML>

b. Selector dengan class

<HTML>

<HEAD>



.right { text-align : right }

</style>

</HEAD>

<BODY>

<h2 class=“right”>Class Heading 2 </h2>

<p class=“right”> Class Paragraf</p>

</BODY>

</HTML>

c. Selector Id

<HTML>

<HEAD>



#BODY_115 {

FONT-SIZE: 20px;

TEXT-DECORATION: underline;

COLOR: blue;

FONT-FAMILY:Comic Sans MS;

}

</style>

</HEAD>

<BODY id=“BODY_115”>

Menggunakan ID Selector

</BODY>

</HTML>

2.4. MEMFORMAT HALAMAN WEB

1. Format dengan margin

<HTML>

<HEAD>

<TITLE>Pengaturan Margin</TITLE>

<STYLE =“text/css”>

BODY

{

margin-top : 1cm;

margin-right : 2cm;

margin-bottom : 1cm;

margin-left : 2cm;

}

</STYLE>

</HEAD>

<BODY>

Pengaturan Margin Halaman (1cm,2cm,1cm,2cm)

</BODY>

</HTML>

2. Pemetaan menggunakan padding

Padding hampir sama dengan margin :

a. Margin hanya digunakan untuk membuat batasan-batasan sisi halaman.

b. Padding dapat membuat batasan-batasan pada komponen web lain seperti tabel, disamping

pengaturan batas halaman.

<HTML>

<HEAD>

<TITLE>Pengaturan Margin</TITLE>


BODY {

padding-top : 10%;

padding-right : 20%;

padding-bottom : 40%;

padding-left: 20%;

}

</STYLE>

</HEAD>

<BODY>

Text ini berada di tengah halaman ,

karna di lakukan pengaturan halaman

dengan menggunakan padding atas 10%, kanan 20%,bawah 40%,dan kiri

20%.

</BODY>

</HTML>

2.5. MEMBUAT BACKGROUND

1. Background warna

<HTML>

<HEAD>

<TITLE>Menggunakan Background Warna</TITLE>


BODY { background-color : yellow}

</STYLE>

</HEAD>

<BODY>

Halaman ini di buat Berwarna Kuning

</BODY>

</HTML>

2. Background campuran

<HTML>

<HEAD>

<TITLE>Menggunakan Background Warna</TITLE>


body {background-color : #99CCFF}

h2 {background : green}

h3 {background-color : transparent}

p {background : rgb(240,248,255)}

</STYLE>

</HEAD>

<BODY>

<h2>Header 2,Background Hijao</h2>

<h3>Header 3 , Bakground Transparan</h3>

<p>Background pada paragraph</p>

</BODY>

</HTML>

3. Background gambar

Properties Value Keterangan

background-image url Alamat gambar yang dituju

background-repeat repeat

repeat-x

repeat-y

no-repeat

Diulang dlm hal

Diulang sumbu x

Diulang sumbu y

Tampil 1 gbr

Background-position top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

x-% y-%

x-pos y-pos

Atas kiri hal

Atas tngh hal

Atas kanan hal

Tgh kiri hal

Pusat hal

Tngh kanan hal

Bwh kiri hal

Bwh tgh hal

Bwh kanan hal

Pakai nilai %

Contoh 1 :

<HTML>

<HEAD>

<TITLE>Menggunakan Background Gambar</TITLE>


BODY

{

background-image:

url(“drums.jpg”);

background-repeat: repeat-x;

}

</STYLE>

</HEAD>

<BODY>

Background Berulang pada Sumbu X

</BODY>

</HTML>

Contoh 2 :

<HTML>

<HEAD>

<TITLE>Menggunakan Background Gambar</TITLE>


BODY

{

background-image:url (“motor.jpg”);

background-repeat: no-repeat;

background-position: center center;

}

</STYLE>

</HEAD>

<BODY>

Background di Pusat Halaman

</BODY>

</HTML>

2.6. FORMAT TEXT PADA WEB


Pengaturan warna

color green, dll

Pengaturan Spasi (jrk antar karakter)

letter-spacing Normal

Length

Ukrn standar HTML

Ukrn panjang (cm,px)

Perataan Text

text-align left

right

center

justify

text-decoration none

underline

overline

line-through

blink

Bentuk standar

Bergaris bwh

Bergaris atas

Text dicoret

Text berkedip

Pengaturan text indentasi

text-indent length

%

Dengn cm, px

Dengan persentase

Pengubahan Bentuk Karakter

text-transform capitalize

uppercase

lowercase

none

Contoh 1 :

<HTML>

<HEAD>

<TITLE>Format Text </TITLE>


p {color : green; letter-spacing: 0.5cm}

h4 {letter-spacing: -2px}

</STYLE>

</HEAD>

<BODY>

<p>Pengaturan Spasi Pada Paragraph </p>

<h4> Header 4</h4>

</BODY>

</HTML>

Contoh 2 :

<HTML>

<HEAD>



h1 {text-align: center}

h2 {text-align: left}

h3 {text-align: right}

</STYLE>

</HEAD>

<BODY>

<h1>Header 1,Di tengah</h1>

<h2>Header 2 , Di kiri</h2>

<h3>Header 3 ,Di kanan</h3>

</BODY>

</HTML>

Contoh 3 :

<HTML>

<HEAD>



em {text-decoration : overline}

h2 {text-decoration: blink}

h3 {text-decoration: underline}

a {text-decoration: none}

</STYLE>

</HEAD>

<BODY>

<em>Bentuk Overline</em>

<h2>Header 2, Bentuk Line-through</h2>

<h3>Header 3,Bentuk Underline</h3>

<p> <a href=“http://lecturer.eepis-its.edu/~zenhadi”>

Penggunaan Dalam Link,Nilai NONE</a></p>

</BODY>

</HTML>

Contoh 4 :

<HTML>

<HEAD>



p.besar {text-transform: uppercase}

p.kecil {text-transform: lowercase}

</STYLE>

</HEAD>

<BODY>

<p class=“besar”>

pengubahan kedalam hurup Besar

</p>

<p class=“kecil”>

PENGUBAHAN KEDALAM HURUF KECIL

</p>

</BODY>

</HTML>

2.7. PENGATURAN FONT


Jenis Font

font-family arial, dll

Ukuran Huruf

Font-size Small

Medium

Large

Length

%

Kecil

Menengah

Besar

Besar font (pt,px)

Persentase

Pengaturan gaya pada font

font-style normal

italic

oblique

Ketebalan huruf

font-weight normal

bold

100 ~ 900

Contoh 1 :

<HTML>

<HEAD>

<TITLE>Pengaturan Font</TITLE>


p.italic

{

font-size :200 % ;

font-style: italic;

}

p.normal{

font-family : verdana ;

font-style: normal;

}

p.oblique {font-style: oblique}

</STYLE>

</HEAD>

<BODY>

<P class=“italic”>Menggunakan Style Italic</P>

<P class=“normal”>Menggunakan Style Normal </P>

<P class=“oblique”>Menggunakan Style Oblieque</P>

</BODY>

</HTML>

Contoh 2 :

<HTML>

<HEAD>

<TITLE>Pengaturan Font</TITLE>


p.normal

{


font-weight: normal;

}

p.thick

{


font-weight: bold;

}

p.thicker

{

font-family : times ;

font-weight: 900;

}

</STYLE>

</HEAD>

<BODY>

<p class=“normal”>

This is a paragraph</p>

<p class=“thick”>


<p class=“thicker”>


</BODY>

</HTML>

2.8. PENGATURAN TABEL

Yang perlu diperhatikan adalah pengaturan border, padding dan margin suatu tabel.

1. Pengaturan padding

<HTML>

<HEAD>

<TITLE>Pengaturan Padding Table</TITLE>


td.kiri{

padding-top: 2cm;

padding-right: 2cm;

padding-bottom: 2cm;

padding-left: 2cm ;

background-color : #F0F8FF;

}

</style>

</HEAD>

<BODY>

<TABLE BORDER=“1”>

<TR>

<TD class=“kiri”>Pading dengan jarak 2cm dari kiri,atas,kanan,dan

bawah</TD>

<TD>Tanpa jarak </TD>

</TR>

</TABLE>

</BODY>

</HTML>

2. Menggunakan file css untuk mempercantik pembuatan tabel.

File table_specbody.css

/* CSS Document */

TH {

color : #FFFFFF;

background-color : #336699;

border-width: 1px ;

border-style:solid;

border-color :red ;

font-size: 9pt;

}

TD {

color : red;

background-color : #E6E6FA;

border-width: 1px ;

border-style:solid;

border-color :blue ;

font-size: 9pt;

}

File html yang akan memanggil file css

<HTML>

<HEAD>

<TITLE>Pengaturan Table spec</TITLE>

<LINK REL=“STYLESHEET” TYPE=“text/css” HREF=“table_specbody.css”>

</HEAD>

<BODY>

<table width=“468” border=“0” cellpadding=“5” cellspacing=“0” >

<tr>

<th width=“112” >Nama Computer</th>

<th width=“91”>Prossesor</th>

<th width=“96”>Ram</th>

<th width=“137” >System Operasi</th>

</tr>

<tr>

<td>Clnt-1</td>

<td >IP 4 1,8 Ghz</td>

<td >10 GB</td>

<td >Redhat Linux</td>

</tr>

<tr>

<td >Clnt-2</td>

<td >IP 2 Ghz C</td>

<td >6 GB</td>

<td >Mandrake Linux</td>

</tr>

<tr>

<td >Clnt-2</td>

<td >XP 2000+ </td>

<td >20 GB</td>

<td>Windows</td>

</tr>

</table>

</BODY>

</HTML>

2.9. PENGATURAN HYPERLINK & TOMBOL YANG MENARIK

Syntax penulisan pada CSS :

a:link {property : value}

Selector Keterangan

a:link Keadaan awal pemicu link aktif

a:visited Keadaan pemicu link setelah dikunjungi

a:active Keadaan pemicu yang sedang aktif

a:hover Kejadian pada pemicu link saat mouse digerakkan diatasnya

1. Penggunaan property selector

<HTML>

<HEAD>

<TITLE>Pengaturan pada link</TITLE>


/*Konversi pengaturan Link pada contoh

sebelumya menggunakan css */

A:link {color : green;}

A:hover { color : pink;}

</STYLE>

</HEAD>

<BODY>

<a href=“http://lecturer.eepis-its.edu/~zenhadi” target=“_self”>Contoh

Hyperlink menggunakan CSS</a>

</BODY>

</HTML>

2. Pembuatan tombol dengan tabel

<HTML>

<HEAD>

<TITLE>Pengaturan Pada Link background</TITLE>


A:link {text-decoration: none}

A:visited {text-decoration: none}

A:active {text-decoration: none}

A:hover {

font-weight:none;

color: red;

background-color:blue;}

</STYLE>

</HEAD>

<BODY>

<TABLE border=“1”>

<TR>

<TD width=“144”>

<a href=“#”>Arahkan Mouse ke sini</a>

</TD>

</TR>

<TR>

<TD width=“144”>

<a href=“#”>Arahkan Mouse ke sini</a>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

3. Membuat tombol visual 3D

a. Pembuatan file css

/* CSS Document */

.leftlinks {

border:1px solid #22476C;

padding:5px;

margin:5px;

text-align:middle;

background-color:#336699;

width:150px;

}

.leftlinks a {

display:block;

margin:3px 0px;

border-top:1px solid #4C86C0;

border-left:1px solid #4C86C0;

border-right:1px solid #22476C;

border-bottom:1px solid #22476C;

padding: 4px 10px;

text-align:center;


color:#EDEDED;

text-decoration:none;

}

.leftlinks a:link {

color:#EDEDED;

}

.leftlinks a:visited {

color:#EDEDED;

}

.leftlinks a:hover {

display:block;

margin:3px 0px;

border-top:1px solid #22476C;

border-left:1px solid #22476C;

border-bottom:1px solid #4C86C0;

border-right:1px solid #4C86C0;

padding: 5px 9px 3px 11px;

text-align:center;


color:#EED929;

text-decoration:none;

}

b. Pembuatan file HTML utk memanggil css

<HTML>

<HEAD>

<TITLE>Pengaturan Pada Link Visualisasi tombol</TITLE>

<LINK REL=“STYLESHEET” TYPE=“text/css” HREF=“link_frtombol.css”>

</HEAD>

<BODY>

<div class=“leftlinks”>

<a href=“index.htm”>Teras Wamika</a>

<a href=“profil.htm”>Pssrofil Organisasi</a>

<a href=“struktur.htm”>Struktur</a>

<a href=“pembimbing.htm”>Pembimbing

Org</a>

<a href=“dpo.htm”>DPO Organisasi</a>

<a href=“kegiatan.htm”>Kegiatan Rutin</a>

<a href=“berita.htm”>Berita UKM</a>

</div>

</BODY>

</HTML>

Fungsi tag <div> : hampir sama dengan tag paragraf <p>, berguna untuk mengelompokkan

sejumlah baris teks yang memiliki karakteristik yang sama.

2.10. Sekilas tentang JavaScript

Javascript adalah bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien.

Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas. Sebagai

contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan-

masukan pada formulir sebelum formulir dikirimkan ke server.

Javascript bukanlah bahasa Java dan merupakan dua bahasa yang berbeda. Javascript

diinterpretasikan oleh klien (kodenya bisa dilihat pada sisi klien), sedangkan kode Java

dikompilasi oleh pemrogram dan hasil kompilasinyalah yang dijalankan oleh klien.

1. Struktur JavaScript

Struktur dari JavaScript adalah sbb :

<SCRIPT LANGUAGE = ”JavaScript”>

<!- -

Penulisan kode javascript

// - - >

</SCRIPT>

Keterangan :

Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser

tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar

sehingga tidak ditampilkan pada jendela browser.

2. JavaScript sebagai bahasa berorientasi pada obyek

Properti

Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.

Penulisan :

Nama_objek.nama_properti = nilai

window.defaultStatus = ”Selamat Belajar JavaScript”;

Metode

Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan

terhadap objek.

Penulisan : Nama_objek.nama_metode(parameter) document.write (”Hallo”)

3. Letak JavaScript dalam HTML

Skrip Javascript dalam dokumen HTML dapat diletakkan pada :

1. Bagian Head

2. Bagian Body (jarang digunakan).

2.11. DASAR-DASAR JAVASCRIPT

1. Pemakaian alert sebagai property window

<HTML>

<HEAD>

<TITLE>Alert Box</TITLE>

</HEAD>

<BODY>

<SCRIPT LANGUAGE = "JavaScript">



</SCRIPT>

</BODY>

</HTML>

2. Pemakaian metode dalam objek.

<HTML>

<HEAD>

<TITLE>Skrip JavaScript</TITLE>

</HEAD>

<BODY>

Percobaan memakai JavaScript:<BR>




</SCRIPT>

</BODY>

</HTML>

3. Pemakaian prompt

<HTML>

<HEAD>

<TITLE>Pemasukan Data</TITLE>

</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

4. Pembuatan fungsi dan cara pemanggilannya

<HTML>

<HEAD>

<TITLE>Contoh Program Javascript</TITLE>

</HEAD>

<SCRIPT language="Javascript">

function pesan(){

alert ("memanggil javascript lewat body onload")

}

</SCRIPT>

<BODY onload=pesan()>

</BODY>

</HTML>

2.12. DASAR-DASAR PEMROGRAMAN DI JAVASCRIPT

1. Operasi dasar aritmatika

<HTML>

<HEAD>


</HEAD>


function test (val1,val2)

{

document.write("<br>"+"Perkalian : val1*val2 "+"<br>")

document.write(val1*val2) document.write("<br>"+"Pembagian : val1/val2

"+"<br>") document.write(val1/val2) document.write("<br>"+"Penjumlahan :

val1+val2 "+"<br>") document.write(val1+val2)

document.write("<br>"+"Pengurangan : val1-val2 "+"<br>")

document.write(val1-val2)

document.write("<br>"+"Modulus : val1%val2 "+"<br>")

document.write(val1%val2)

}

</SCRIPT>

<BODY>

<input type="button" name="button1" value="arithmetic"

onclick=test(9,4)>

</BODY>

</HTML>

2. Operasi relational

<HTML>

<HEAD>


</HEAD>

<SCRIPT language="Javascript"> function test () {

val1=window.prompt("Nilai I :") val2=window.prompt("Nilai II :")

document.write("<br>"+"val1==val2"+"<br>") document.write(val1==val2)

document.write("<br>"+"val1!=val2"+"<br>") document.write(val1!=val2)

document.write("<br>"+"val1&gtval2"+"<br>") document.write(val1>val2)

document.write("<br>"+"val1&ltval2"+"<br>") document.write(val1<val2) }

</SCRIPT>

<BODY>

<input type="button" name="button1" value="relational" onclick=test()>

</BODY>

</HTML>

3. Seleksi kondisi (if..else)

<HTML>

<HEAD>

<TITLE>Contoh if-else</TITLE>

</HEAD>

<BODY>


<!--

var nilai = prompt("Nilai (0-100): ", 0);

var hasil = "";

if (nilai >= 60)

hasil = "Lulus";

else

hasil = "Tidak Lulus";

document.write("Hasil: " + hasil);

//-->

</SCRIPT>

</BODY>

</HTML>

4. Penggunaan operator switch untuk seleksi kondisi

<HTML>

<HEAD>


</HEAD>


function test ()

{

val1=window.prompt("Input Nilai (1-5):")

switch (val1)

{

case "1" :

document.write("bilangan satu")

break case "2" :

document.write("bilangan dua")

break case "3" :

document.write("bilangan tiga")

break case "4" :

document.write("bilangan empat")

break case "5" :

document.write("bilangan lima")

break default :

document.write("bilangan lainnya")

}

}

</SCRIPT>

<BODY>

<input type="button" name="button1" value="switch" onclick=test()>

</BODY>

</HTML>

5. Pemakaian looping < for >

<HTML>

<HEAD>


</HEAD>

<BODY>

</SCRIPT>

</BODY>

</HTML>

6. Pemakaian looping < do..while >

<HTML>

<HEAD>


</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

7. Pemakaian looping < while >

<HTML>

<HEAD>


</HEAD>

<BODY>




</SCRIPT>

</BODY>

</HTML>

2.13. PEMBUATAN FORM

1. Form input :

<html>

<head> </head>


function test () {

var val1=document.kirim.T1.value

if (val1%2==0)

document.kirim.T2.value="bilangan genap"

else

document.kirim.T2.value="bilangan ganjil"

}

</SCRIPT>

<body>

<form method="POST" name="kirim">

<p>BIL <input type="text" name="T1" size="20"> MERUPAKAN BIL <input

type="text" name="T2" size="20">

</p>

<p><input type="button" value="TEBAK" name="B1" onclick=test()>

</p>

</form>

</body>

</html>

2. Form button :

<HTML>

<HEAD>

<TITLE>Objek document</TITLE>

</HEAD>

<BODY>




</SCRIPT>

<H1>TES</H1>

<FORM>

<INPUT TYPE = "BUTTON"

VALUE = "Latar Belakang Hijau" onClick = "ubahWarnaLB('GREEN')">


VALUE = "Latar Belakang Putih" onClick = "ubahWarnaLB('WHITE')">


VALUE = "Teks Kuning" onClick = "ubahWarnaLD('YELLOW')">

<INPUT TYPE = "BUTTON" VALUE = "Teks Biru"

onClick = "ubahWarnaLD('BLUE')">

</FORM>




</SCRIPT>

</BODY>

</HTML>

HARI KE – III

MySQL DAN PHP

3.1. PENGENALAN BASIS DATA

1. Basis Data:

Himpunan kelompok data (arsip) yang saling berhubungan, yang diorganisasi sedemikian

rupa, sehingga kelak dapat dimanfaatkan kembali dengan cepat.

2. Komponen Sistem Basis Data:

a. Perangkat Keras (Hardware)

Komputer, memori, storage (Harddisk), peripheral, dll.

b. Sistem Operasi (Operating System)

Program yang menjalankan sistem komputer, mengendalikan resource komputer dan

melakukan berbagai operasi dasar sistem komputer.

c. Basis Data (Database)

Menyimpan berbagai obyek database (struktur tabel, indeks,dll)

d. DBMS (Database Management System)

Perangkat lunak yang memaintain data dalam jumlah besar.

e. Pemakai (User)

Para pemakai database.

3. Bahasa Basis Data

DBMS merupakan perantara antara user dengan database.

Cara komunikasi diatur dalam suatu bahasa khusus yang telah ditetapkan oleh DBMS.

Contoh: SQL, dBase, QUEL, dsb.

Bahasa database, dibagi dalam 2 bentuk:

- Data Definition Language (DDL)

Digunakan dalam membuat tabel baru, indeks, mengubah tabel, menetukan struktur

tabel, dsb.

- Data Manipulation Language (DML)

a.Digunakan dalam memanipulasi dan pengambilan data pada database.

b.Manipulasi data, dapat mencakup:

- Pemanggilan data yang tersimpan dalam database (query)

- Penyisipan/penambahan data baru ke database

ANTARMUKA

BERBENTUK

FORM

isian: ___

pass: * * * *

SUBMIT

PROGRAM

PEMROSES

RESPON

(ASP, PHP,

CGI)

Hasil

Form

Nama Variabel

dan Nilai

HTML

DATABASE

client

server

- Penghapusan data dari database

- Pengubahan data pada database

3.2. INSTALASI XAMPP

Instalasi XAMPP di lingkungan Windows :

1. Klik xampp-win32-1.8.3-4-VC11-installer.exe untuk memulai instalasi

2. Klik next, sampai ada tampilan seperti berikut :

Pastikan Destination Folder di C:\mysql

3. Klik next hingga instalasi dimulai.

4. Klik Finish, kemudian akan tampil window sebagai berikut

Klik Start pada module Apache dan MySQL

3.2. DASAR-DASAR MYSQL

Dalam bahasa SQL pada umumnya informasi tersimpan dalam tabel-tabel yang secara logik

merupakan struktur dua dimensi terdiri dari baris (row atau record) dan kolom (column atau

field). Sedangkan dalam sebuah database dapat terdiri dari beberapa table. Beberapa tipe data

dalam MySQL yang sering dipakai:

1. Membuat Database Dan Table

Untuk masuk ke dalam program MySQL pada prompt jalankan perintah berikut ini:

cd C:\xampp\mysql\bin\ [Enter]

mysql [Enter]

Kemudian akan masuk kedalam MySQL seperti tampilan dibawah ini:

Bentuk prompt “mysql>” adalah tempat menuliskan perintah-perintah MySQL. Setiap

perintah SQL harus diakhiri dengan tanda titik-koma “;” .

Cara untuk membuat sebuah database baru adalah dengan perintah:

create database namadatabase;

Contoh:

create database pens;

Untuk membuka sebuah database dapat menggunakan perintah berikut ini:

use namadatabase;

Contoh:

use diskominfo;

Perintah untuk membuat tabel baru adalah:

create table namatabel

(

struktur

);

Constraint

Constraint adalah batasan atau aturan yang ada pada table.

MySQL menyediakan beberapa tipe constraint berikut :

• NOT NULL

Suatu kolom yang didefinisikan dengan constraint NOT NULL tidak boleh berisi

nilai NULL. Kolom yang befungsi sebagai kunci primer (primary key) otomatis tidak

boleh NULL.

• UNIQUE

Mendefinisikan suatu kolom menjadi bersifat unik, artinya antara satu data dengan data

lainnya namanya tidak boleh sama, misal alamat email.

• PRIMARY KEY

Constraint PRIMARY KEY membentuk key yang unik untuk suatu table.

• FOREIGN KEY

FOREIGN KEY constraint didefinisikan pada suatu kolom yang ada pada suatu table,

dimana kolom tersebut juga dimiliki oleh table yang lain sebagai suatu PRIMARY KEY,

biasa dipakai untuk menghubungkan antara 2 tabel.

Contoh Pembuatan Tabel :

Misalkan kita ingin menyimpan data anggota yaitu: nomor, nama, email, alamat, kota.

Sedangkan strukturnya seperti tabel dibawah ini :

Perintah MySQL untuk membuat tabel seperti diatas bisa dengan 2 cara sbb :

create table anggota (

nomor int(6) not null primary key,

nama char(40) not null,

email char(255) not null,

alamat char(80) not null,

kota char(20) not null

);

create table anggota (

nomor int(6) not null,


email char(255) not null,

alamat char(80) not null,

kota char(20) not null,

primary key (nomor)

);

2. Perintah-Perintah Dasar SQL

A. Pemasukan data

Untuk memasukkan sebuah baris (record) kedalam tabel MySQL adalah sebagai berikut:

INSERT INTO table [(column1, column2,...])]

VALUES (value1, value2,...]);

Contoh :

Insert into anggota (nomor,nama,email,alamat,kota) values

(100,’Adi’,’[email protected]’,’Jl. Keputih 2A no 5’,’Surabaya’);

atau

Insert into anggota values (100,’Adi’,’[email protected]’,’Jl. Keputih 2A

no 5’, ’Surabaya’);

Latihan :

Masukkan data-data berikut ini ke tabel anggota :

Nomor Nama Email Alamat Kota

100 Adi [email protected] Jl. Keputih 2A no 5 Surabaya

101 Arif [email protected] Jl. Gebang Lor 32D Surabaya

102 Iqbal [email protected] Jl. Klampis 3 Surabaya

103 Setyo [email protected] Jl. Madiun 5 Sidoarjo

104 Ilham [email protected] Jl. Surabaya 9 Malang

105 Syamsudin [email protected] Jl. Pabean 11 Surabaya

106 Faruq [email protected] Jl. Raya 5 Kediri

107 Hari [email protected] Jl. Raya 9 Banyuwangi

B. Menghapus Record

Untuk menghapus suatu record dengan kondisi tertentu digunakan perintah sebagai berikut:

DELETE [FROM] table [WHERE condition];

Contoh :

a. Untuk menghapus record dengan no = 107

Delete from anggota where no=’107’;

or Delete from anggota where no=107;

b. Untuk menhapus seluruh record

Delete from anggota;

C. Memodifikasi Record

Untuk memodifikasi (merubah) isi record tertentu adalah dengan menggunakan perintah

sebagai berikut:

UPDATE table

SET column = value [, column = value, ...]

[WHERE condition];

Contoh :

Untuk meng-update data email di tabel anggota, nomor 107.

update anggota set email=’[email protected]’ where nomor=’107’;

D. Menampilkan Isi Tabel

Bentuk umum :

SELECT [DISTINCT] < attribute-list >

FROM < table-list >

WHERE < condition>

Latihan :

1. Untuk menampilkan semua kolom(field) pada tabel anggota

select * from anggota;

2. Untuk menampilkan kolom (field) nomor dan nama pada tabel anggota

select nomor, nama from anggota;

3. Untuk menampilkan semua kolom pada tabel anggota yang berada pada kota ‘Surabaya’

select * from anggota where kota=’Surabaya’;

4. Untuk menampilkan semua kolom pada tabel anggota dengan urut nama

select * from anggota order by nama;

5. Untuk menghitung jumlah record pada tabel anggota

select count(*) from anggota;

6. Untuk menampilkan kota dengan tidak menampikan kota yang sama pada tabel anggota

select distinct kota from anggota;

7. Untuk menampilkan nama dan email yang mempunyai email di ‘yahoo.com’

select nama,email from anggota where email like ‘%yahoo.com’;

8. Untuk menampilkan nomor, nama dan email yang nomornya diatas 103 dan yang berawalan

dengan huruf S.

select nomor, nama, email from anggota where nomor >= 103 AND nama

like ‘S%’;

9. Untuk menampilkan nomor, nama yang nomornya diantara 103 ~ 105

select nomor, nama from anggota where nomor between 103 and 105.

3.3. LATIHAN MYSQL

1. Buatlah database baru dengan nama lat_mysql

2. Buatlah tabel dengan nama pegawai yang memiliki field sebagai berikut :

Kolom / Field Tipe data

ID int (5) not null

Nama varchar(20) not null

Alamat varchar(20) not null

Gaji int (10) not null

3. Masukkan data-data berikut ini :

ID Nama Alamat Gaji

100 Arif Surabaya 10000

101 Andi Jakarta 14000

102 Burhan Malang 12000

103 Fikri Madiun 15000

104 Fariz Malang 17000

105 Sigit Surabaya 20000

106 Ifan Kediri 16000

107 Hanif Yogyakarta 12000

108 Zakiuddin Surabaya 21000

4. Hapuslah record dengan ID 100.

5. Update data untuk ID 101 dan 102 sbb :

ID Nama Alamat Gaji

101 Naila Surabaya 10000

102 Rafi Semarang 14000

6. Buat perintah SQL berikut ini untuk menampilkan :

a. Semua kolom dari tabel pegawai

b. Kolom nama dan gaji dari tabel pegawai

c. Kolom nama dan alamat yang mempunyai nama dengan awalan F.

d. Kolom nama dan alamat yang mempunyai nama dengan akhiran n

e. Kolom nama dan gaji yang mempunyai gaji diatas 15000.

f. Kolom nama, alamat dan gaji yang bergaji diatas 13000 dan beralamat di Surabaya.

g. Kolom nama, gaji dengan range gaji antara 15000 ~ 20000.

h. Gaji max, min,rata2 dari tabel pegawai > select max(gaji), min(gaji), avg(gaji)

from pegawai.

3.4 PENGENALAN PHP

PHP merupakan akronim dari ”PHP : Hypertext Presprocessor”. PHP merupakan bahasa

script yang biasa digunakan untuk web development yang dapat diselipkan dalam HTML.

Berbeda dengan script-script lainnya seperti Java Script atau VB script, PHP dieksekusi di

lingkungan server, client hanya menerima hasil dari script yang telah dieksekusi, tanpa

bisa mengetahui kode yang digunakan.

Apa saja yang dapat dilakukan PHP?

PHP difokuskan pada scripting server-side, jadi Anda dapat melakukan apa yang bisa

dilakukan CGI dengan menggunakan PHP seperti mengambil data inputan form,meng-

generate konten halaman dinamis, mengirim dan menerima cookies dan masih banyak lagi.

Kemampuan dan supportnya untuk database juga sangat dapat diandalkan.

Sekarang ini, PHP bahkan dikembangkan untuk menjadi bahasa pemrograman. Untuk lebih

jelasnya, Anda dapat mencari informasi lebih lanjut di distro-distro Linux keluaran baru.

Di lingkungan mana PHP bekerja?

Awalnya, PHP bekerja di lingkungan Linux, karena merupakan ’turunan’ bahasa PEARL

yang merupakan bahasa pemrograman native di lingkungan Linux dan Unix. Namun seiring

perkembangan dan kebutuhan maka PHP dibuat secara cross platform. PHP dapat bekerja di

lingkungan Windows maupun Linux.

PHP mengeksekusi server script lebih cepat dari server script manapun. PHP menempati

ranking pertama dalam hal kecepatan eksekusi, diikuti oleh ASP dan JSP.

3.5. TAG DALAM PHP

Banyak cara untuk menyisipkan PHP dalam script HTML, bentuk yang paling umum

digunakan adalah sebagai berikut :

<?php

………… ?>

Ada kalanya kita sebagai pemrogram, karena banyaknya kode program atau variabel dalam

program, perlu menandai atau memberi komentar pada program. Komentar pada program

merupakan tulisan pada program yang tidak dieksekusi. Pada PHP, ada 3 macam cara

penulisannya :

1. /* komentar */

Tulisan apapun yang berada di antara ’/*’ dan ’*/’ akan dianggap sebagai komentar. Cara

seperti ini sangat berguna dan efisien untuk pemberian komentar yang memakan banyak

baris.

2. // komentar

Tulisan di baris yang sama setelah ’//’ akan dianggap sebagai komentar. Cara ini berguna

untuk pemberian komentar singkat yang tak lebih dari 1 baris saja.

3.6. VARIABEL DAN TIPE DATA

Dalam PHP, penulisan variabel diawali dengan karakter ‘$’, kemudian diikuti dengan huruf

sebagai karakter pertama. Setelah itu, dapat dilajutkan dengan kombinasi huruf dan angka.

Variabel tidak boleh mengandung spasi maupun tanda baca di dalamnya, kecuali underscore

(’_’). Variabel pada PHP bersifat “case sensitif”, yang berarti Anda harus memperhatikan

penulisan huruf besar dan huruf kecil. Variabel $jumlah berbeda dengan $Jumlah. Contoh

penamaan variabel yang benar :

$nama_pemakai

$kota_3

$user1

Contoh penamaan variabel yang salah :

$nama pemakai

$3kota

$us\er1

Tipe Data

Tipe data yang dapat diolah menggunakan PHP, antara lain :

1. Boolean

Nilai boolean menyatakan nilai kebenaran. Suatu variabel boolean dikatakan salah (FALSE)

jika :

1. Variabel boolean bernilai FALSE

2. Variabel integer 0 (nol)

3. Variabel float 0.0 (nol)

4. Varaibel string kosong atau string “0”

5. Variabel array dengan nol elemen

6. Variabel objek dengan nol anggota

7. Dan tipe spesial yaitu NULL

Selain hal-hal tersebut di atas, maka nilai boolean dianggap TRUE.

2. Integer

5

-9

1500

0123 octal

0xfb hexadecimal

3. Floating Point

0.8998

23e2

4. String

’Teks menggunakan aphostof’ ...menggunakan tanda petik tunggal

”Teks menggunakan quote” ...menggunakan tanda kutip

Pada tipe data string, terdapat escape character, yaitu karakter khusus yang digunakan

mewakili karakter ASCII dengan fungsi khusus. Untuk mendefinisikan karakter yang akan

ditampilkan jika karakter tersebut merupakan escape character yaitu dengan mengawali

karakter tersebut dengan tanda \ (backslash).

Daftar escape character :

\n linefeed (LF or 0x0A (10) in ASCII)

\r carriage return (CR or 0x0D (13) in

ASCII) \t horizontal tab (HT or 0x09 (9) in ASCII)

\\ backslash

\$ dollar sign

\" double-quote

Operator

Operator merupakan suatu tool/alat untuk keperluan manipulasi data. Operator dapat

dibedakan menjadi :

1. Operator Aritmetika

Contoh Nama Hasil

$a + $b Penjumlahan Jumlah $a dan $b.

$a - $b Pengurangan Selisih $a dan $b.

$a * $b Perkalian Hasil kali $a dan $b.

$a / $b Pembagian Quotient dari $a dan $b.

$a % $b Modulus Remainder dari $a

dibagi $b.

2. Operator String

Menggunakan ’.’ (tanda titik)

$a = "Hello ";

$b = $a . "World!"; // sekarang $b berisi "Hello World!"

Menggunakan ‘.=’ (tanda titik dan sama dengan)

$a = "Hello ";

$a .= "World!"; // sekarang $a berisi "Hello World!"

3. Operator Increment/Decrement

Contoh Nama Keterangan

++$a Pre-

increment Increment $a dengan 1, mengembalikan $a.

$a++ Post-

increment

Mengembalikan $a, lalu increments $a

dengan 1 --$a Pre-

decrement

Decrements $ dengan 1, lalu

mengembalikan $a. $a-- Post-

decrement

Mengembalikan $a, lalu decrements $a

dengan 1

4. Operator Logika

Contoh Name Hasil

$a and

$b And TRUE jika $a dan $b TRUE.

$a or $b Or TRUE jika $a atau $b TRUE.

$a xor

$b Xor TRUE jika salah satu dari $a atau $b

TRUE ! $a Not TRUE jika $a bukan TRUE.

$a &&

$b And TRUE jika $a dan $b TRUE.

$a || $b Or TRUE jika $a atau $b TRUE.

5. Operator Ternary

Menggunakan tanda ’?’, dengan syntax : (ekspresi1) ? (ekspresi2) : (ekspresi3)

Operator ternary malakukan pengujian pada ekspresi1, jika hasilnya TRUE, maka ekspresi

2 yang dijalankan, jika hasil ekspresi1 FALSE, maka ekspresi3 yang dijalankan.

Contoh :

<?

$a = 2;

$hasil = ($a<4) ? ($a*2) : ($a*3)

echo ”$hasil”;

?>

Dari contoh di atas, maka hasil yang terlihat adalah 4, namun jika nilai $a

diganti 5, maka hasilnya adalah 15.

6. Operator Perbandingan

Contoh Nama Hasil

$a == $b Equal TRUE jika $a sama dengan $b.

$a ===

$b Identical

TRUE jika $a sama dengan $b, dan mempunyai tipe yang

sama (hanya di PHP 4)

$a != $b Not equal TRUE jika $a tidak sama dengan $b.

$a <> $b Not equal TRUE jika $a tidak sama dengan $b.

$a !==

$b Not identical

TRUE jika $a tidak sama dengan $b, atau mempunyai tipe

yang berbeda (hanya di PHP 4)

$a < $b Less than TRUE jika $a kurang dari $b.

$a > $b Greater than TRUE jika $a lebih dari $b.

$a <= $b Less than or

equal to TRUE jika $a lebih kecil sama dengan $b.

$a >= $b Greater than or

equal to TRUE jika $a lebih besar sama dengan $b.

7. Operator Assignment

Contoh :

$a = 4; //$a diisi dengan nilai 4

$a += 5; //sama dengan $a = $a + 5;

8. Operator Kontrol Error

Dengan memberikan tanda ’@’ pada ekspresi PHP, maka pesan error yang dihasilkan oleh

suatu ekspresi akan diabaikan. Jika fitur track_error enable, maka setiap pesan error yang

diterima akan disimpan dalam variabel global

$php_errormsg. Contoh :

<?php

$my_file = @file ('non_existent_file') or

die ("Failed opening file: error was '$php_errormsg'");

?>

9. Operator Eksekusi

Operator ini hanya bekerja di lingkungan sistem operasi Linux dan Unix, dengan webserver

yang digunakan adalah Apache. Operator eksekusi menggunakan karakter `...perintah...`

(perintah di antara backticks), dimana hasilnya ditampung pada sebuah variabel dan

kemudian ditampilkan di halaman web.

Lingkup Variabel

1. Variabel Global

Variabel global adalah variabel dan data di dalamnya dikenali oleh seluruh bagian script. Suatu

variabel yang dibuat pada bagian utama script bukan pada bagian suatu fungsi, , variabel-

variabel ini akan bersifat global.

Untuk fungsi yang menggunakan variabel global, maka nama variabel pada fungsi harus

dideklarasikan global.

Contoh :

function test() {

mailto:@file

global $var; echo $var;

}

$var = 2;

test();

2. Variabel Lokal

Variabel lokal merupakan variabel yang dideklarasikan pada suatu fungsi, dan hanya

dapat digunakan oleh fungsi tersebut.

3. Variabel Static

Variabel static merupakan variabel lokal dalam fungsi yang memungkinkan nilai terakhir

di dalamnya dipertahankan.

Sintaks untuk deklarasi variabel statik :

function namafungsi() {

static $namaVariabel = InitValue;

perintah perubaan $namaVariabel;

...

}

4. Variabel Web

Variabel web merupakan variabel yang dihasilkan oleh PHP secara otomatis, ketika ada

request (permintaan) ke server yang mendukung PHP. Contoh variabel web yaitu form

isian dari user, baik dengan metode POST maupun GET, selain itu ada pula SESSION,

COOKIES dan lain sebagainya.

Untuk menampilakan data dapat digunakan print maupun echo. Sintaks yang digunakan

antara lain :

print(data);

atau

print data;

atau

echo(data);

atau

echo data;

Kedua perintah baik print maupun echo adalah sama saja, tergantung kebiasaan atau kesukaan

Anda dalam menggunakannya. Yang perlu diperhatikan di sini adalah bahwa untuk data string

gunakanlah aphostophe (petik tunggal ‘) atau quote (petik ganda “). Namun untuk pencetakan

variabel, agar ditampilkan isinya, gunakan quote. Seperti pada contoh di bawah ini.

Contoh :

<?

$a = 10;

$b = “test”;

echo “Dengan quote -> ”;

echo “nilai $b ku $a ”;

echo “Dengan aphostrophe -> ”;

echo ‘nilai $b ku $a’

?>

Hasil dari script di atas adalah :

Dengan quote -> nilai test ku 10Dengan aphostrophe -> nilai $b ku $a

3.7. STRUKTUR KONTROL

Struktur kontrol merupakan inti dari logika pemrograman. Secara mendasar ada 3

struktur kontrol yaitu :

• Sequence atau urutan

• Selection atau pilihan

• Iteration atau pengulangan

if / if else

Sintaks untuk stuktur kontrol menggunakan if else/ifelse :

if (ekspresi) { perintah1; perintah2;

...

}

Struktur kontrol if memeriksa isi ekspresi, dimana jika terpenuhi atau bernilai benar, maka

ia akan menjalankan perintah-perintah yang ada dalam blok. Untuk banyak kondisi, bisa

dilakukan dengan sintaks :

if (ekspresi1) { perintah1; perintah2;

...

}

elseif(ekspresi2) {

perintah3;

perintah4;

...

}

else {

perintah5;

perintah6;

...

}

Dimana jika ekspresi1 tidak tercapai, maka struktur kontrol akan memeriksa apakah

ekspresi berikutnya tercapai, hingga ia mencapai struktur else sebagai pilihan default atau

terakhir.

switch

Dapat dikatakan kalu switch adalah merupakan penyederhanaan dari bentuk if else

ataupun ifelse. Sintaks dari struktur kontrol menggunakan switch antara lain :

switch($variabel) {

case nilai1 : perintah_jika_nilai1; break;

case nilai2 :

perintah_jika_nilai2;

break;

case nilai3 : perintah_jika_nilai3; break;

…

default :perintah_untuk_nilai_default;

}

Untuk nilai default, tidaklah harus ada.

while

Sintaks :

while(ekspresi) { perintah1; perintah2;

...

}

do .. while

Sintaks :

do {

perintah1;

perintah2;

...

} while (ekspresi);

for

Sintaks :

for(nilai_awal ;syarat_terjadinya_loop ; inc_atau_dec)

{

perintah1;

perintah2;

...

}

foreach

Struktur kontrol foreach digunakan untuk pengulangan terhadap variabel array. Struktur

kontrol foreach akan melakukan loop mulai dari awal indeks array hingga indeks

terakhir array tersebut, meskipun array itu bersifat assosiatif.

Sintaks :

foreach (var_array as value) {

perintah1;

perintah2;

…

}

Untuk array asosiatif :

foreach (var_array as key => value) {

perintah1;

perintah2;

…

}

break

Perintah break digunakan untuk keluar dari suatu pengulangan/loop. Contoh :

for($a = 0; $a < 100 ; $a++)

{

if($a == 30) { break; }

else echo ”$a ,”;

}

Pada contoh di atas, akan memunculkan tulisan berupa nilai variabel a, mulai dari

0,1,2,3...hingga ketika mencapai nilai 30 maka loop akan berhenti karena perintah break.

continue

Perintah continue digunakan untuk menuju step atau iterasi berikutnya dari suatu loop. Contoh

:

for($a = 0; $a<10; $a++)

{

if($a%2==0) continue;

echo “$a ”;

}

Pada contoh di atas, hasil yang akan didapat adalah “1 3 5 7 9”

3.8. LATIHAN PHP

1. Pemakaian Variabel

<HTML>

<HEAD>

<TITLE> Contoh Skrip PHP </TITLE>

<BODY>

<?

$nama = "Muhammad Faruq";

echo "$nama berkata \"Katakan namamu!\"";

?>

</BODY>

</HTML>

2. Operator Penugasan

<?

$a = 3;

$b = 7;

$a += 5;

$b = ($c = 11) + 3;

echo "Nilai variabel a adalah = $a";

echo "<BR>";

echo "Nilai variabel b adalah = $b";

echo "<BR>";

echo "Nilai variabel c adalah = $c";

?>

3. Operasi Aritmatika

<?

$a=10;

$b=3;

echo "\$a = $a <BR>"; echo "\$b = $b <BR>"; echo '$a + $b = '; print $a+$b;

echo "<BR>";

echo '$a - $b = ';

print $a-$b;

echo "<BR>";echo '$a * $b = ';

print $a*$b;

echo "<BR>";

echo '$a / $b = ';

print $a/$b;

echo "<BR>";

echo '$a % $b = ';

print $a%$b;

?>

4. Operator Logika

<?

$b = 4!=4;

$c = 3+7 == 10;

$a = ($b and $c);

echo "\$a=$a <BR>";

$a = ($b or $c);

echo "\$a=$a <BR>";

$a = ($b xor $c);

echo "\$a=$a <BR>";

$a = (!$b or $c);

echo "\$a=$a <BR>";

$a = $b && $c;

echo "\$a=$a <BR>";

$a = $b || $c;

echo "\$a=$a <BR>";

?>

5. Operator Pembandingan

<?

$x = 4;

$a = ($x == 4);

echo "\$a = $a <BR>";

$b = ($x === "4");

echo "\$b = $b <BR>";

$c = ($x != 4);

echo "\$c = $c <BR>";

$d = ($x !== "4");

echo "\$d = $d <BR>";

$e = ($x < 5);

echo "\$e = $e <BR>";

$f = ($x > 5);

echo "\$f = $f <BR>";

$g = ($x <= 4);

echo "\$g = $g <BR>";

$h = ($x >= 5);

echo "\$h = $h <BR>";

?>

6. Struktur Kontrol : If

<?

$a = 5;

$b = 7;

if ($a < $b)

{

echo "\$a lebih kecil daripada \$b";

}

?>

7. Struktur Kontrol : If - else

<?

$a = 5;

$b = 3;

echo "\$a = $a <BR>";

echo "\$b = $b <BR>";

if ($a < $b)

{

echo '$a lebih kecil daripada $b';

}

else

{

echo '$a lebih besar daripada $b';

}

?>

8. Struktur Kontrol : Syntax if – else yang lain

<?

$a = 5;

$b = 7;

echo "\$a = $a <BR>"; echo "\$b = $b <BR>"; if ($a == $b):

echo '$s sama dengan $b';

elseif ($a > $b):

echo '$a lebih besar daripada $b';

else:

echo '$a lebih kecil daripada $b';

endif;

?>

9. Struktur Kontrol : Switch

<?

$a = 5;

switch ($a) {

case 0:

echo '$a sama dengan 0';

break;

case 1:


break;

case 2:


break;

default:

echo '$a tidak sama dengan 0, 1, atau 2';

}

?>

10. Struktur Kontrol : while

<?

echo "<H3> Cara 1 </H3>";

$i = 1;

while ($i <= 10)

{

print $i++;

}

echo "<BR>";

echo "<H3> Cara 2 </H3>";

$i = 1;

while ($i <= 10):

print $i;

$i++;

endwhile;

?>

11. Struktur Kontrol : do...while

<?

$i = 2;

do

{

echo "\$i = $i <BR>";

$i++;

}

while ($i < 5);

?>

12. Struktur Kontrol : for

<?

for ($i=1;$i<=10;$i++) {

print $i;

}

?>

13. Struktur Kontrol : break

<?

for ($i = 1; $i <= 10; $i++) {

if ($i == 6) {

break;

}

echo "\$i = $i <BR>";

}

?>

14. Struktur Kontrol : continue

<?

for ($i = 1;$i <= 10;$i++) {

if (!($i%2)) {

continue;

}

echo "\$i = $i <BR>";

}

?>

HARI KE – IV

PEMROGRAMAN WEB

4.1. PENGOLAHAN DATA DARI FORM

Web menerima input dari user atau pengunjung menggunakan metode GET dan POST. GET

akan mengirimkan data bersama dengan URL, sedangkan POST mengirimkannya secara

terpisah.

User mengirimkan data input dengan mengisi teks atau pilihan pada attribut form html. Apa

saja yang merupakan komponen form html diantaranya :

Form

<FORM ACTION=action base> form tags </FORM>

<FORM METHOD=method> form tags </FORM>

<FORM ENCTYPE=media type> form tags </FORM>

<FORM ACTION=action base TARGET="target window name"> form tags

</FORM>

<FORM SCRIPT=URL> form tags </FORM>

Note : target window name diisikan berupa:

_blank

_self

_parent

_top

Form Input Check Box

<INPUT TYPE=CHECKBOX NAME=name VALUE=value>

<INPUT TYPE=CHECKBOX NAME=name VALUE=value CHECKED>

Form Input File

<INPUT TYPE=FILE NAME=name ACCEPT=mime type list>

Form Input Hidden

<INPUT TYPE=HIDDEN NAME=name VALUE=value>

Form Input Image

<INPUT TYPE=IMAGE NAME=name SRC="URL">

<INPUT TYPE=IMAGE NAME=name SRC="URL" ALIGN="alignment">

Form Input Password

<INPUT TYPE=PASSWORD NAME=name>

<INPUT TYPE=PASSWORD NAME=name MAXLENGTH=length>

<INPUT TYPE=PASSWORD NAME=name SIZE=size>

<INPUT TYPE=PASSWORD NAME=name VALUE=value>

Form Input Radio Button

<INPUT TYPE=RADIO NAME=name VALUE=value>

<INPUT TYPE=RADIO NAME=name VALUE=value CHECKED>

Form Input Reset

<INPUT TYPE=RESET>

Form Input Submit

<INPUT TYPE=SUBMIT>

<INPUT TYPE=SUBMIT NAME=name>

<INPUT TYPE=SUBMIT VALUE=value>

Form Input Button

<INPUT TYPE=BUTTON>

<INPUT TYPE=BUTTON NAME=name>

<INPUT TYPE=BUTTON VALUE=value>

Form Input Text

<INPUT TYPE=TEXT NAME=name>

<INPUT TYPE=TEXT NAME=name MAXLENGTH=length>

<INPUT TYPE=TEXT NAME=name SIZE=size>

<INPUT TYPE=TEXT NAME=name VALUE=value>

Form Select

<SELECT NAME=name> option entries </SELECT>

<SELECT NAME=name MULTIPLE> option entries </SELECT>

<SELECT NAME=name SIZE=size> option entries </SELECT>

<SELECT NAME=name SRC=URL WIDTH=width HEIGHT=height UNITS=units>

option entries </SELECT>

<OPTION> content

<OPTION SELECTED> content

<OPTION VALUE=value> content

<OPTION SHAPE=shape>

Form Text Area

<TEXTAREA NAME=name COLS=# columns ROWS=# rows> content </TEXTAREA>

UPLOAD FILE

Upload merupakan proses penyalinan data yang ada dari komputer client ke komputer server.

Faslilitas upload memungkinkan aplikasi web misalnya pendaftaran keanggotaan yang

menggunakan foto, atau lainnya. Namun biasanya upload digunakan untuk mempermudah

administrasi.

LATIHAN FORM :

1. Proses Form menggunakan metode : GET

a. Untuk membuat inputan, dan beri nama file : metodeget.php

<html>

<head>

<title> Form method GET </title>

</head>

<body>

<h1>Input</h1>

<form action="methodgetproses.php" method="get">

Masukkan nama : <input type"text" name="nama" size="25">

<input type="submit" value="Proses">

</form>

</body>

</html>

b. Buat file untuk memproses variabel yang diberikan oleh file metodeget.php, beri nama

filenya : methodgetproses.php

<html>

<head>

<title> Method GET proses </title>

</head>

<body>

Data nama yang diinputkan adalah : <?echo $_GET["nama"]?>

</body>

</html>

Keterangan :

Dengan metode GET maka data yang dikirimkan ke file php yang berikutnya akan

ditampilkan, cara ini tidak cocok bila data yang dimasukkan berupa password.

Data yang diinputkan

akan ditampilkan

2. Proses Form menggunakan metode : POST

a. Untuk membuat inputan, dan beri nama file : metodepost.php

<html>

<head>

<title> Form method GET </title>

</head>

<body>

<h1>Input</h1>

<form action="methodpostproses.php" method="post">

Masukkan nama : <input type"text" name="nama" size="25">

<input type="submit" value="Proses">

</form>

</body>

</html>

b. Buat file untuk memproses variabel yang diberikan oleh file metodepost.php, beri nama

filenya : methodpostproses.php

<html>

<head>

<title> Method POST proses </title>

</head>

<body>

Data nama yang diinputkan adalah : <?echo $_POST["nama"]?>

</body>

</html>

Keterangan :

Dengan metode POST, maka data yang dikirimkan akan disembunyikan, hal ini sangat cocok

bila dipakai untuk inputan berupa password. Untuk selain password, pemakaian GET &

POST tergantung pada kebutuhan.

Data yang diinputkan

akan disembunyikan

3. Proses input data dengan password menggunakan metode : POST

a. Untuk membuat inputan, dan beri nama file : metodepost.php

<html>

<head>

<title>Contoh Form dengan POST</title>

</head>

<body>

<form action="proc_login.php" method="post">

<h1>Only for authorized user</h1>

<hr>

Username : <input type="text" name="username">

<br>

Password : <input type="password" name="password">

<br>

<input type="submit" value="login">

</form>

</body>

</html>

b. Buat file untuk memproses variabel, beri nama filenya : proc_login.php

<html>

<head>

<title>Proses Input</title>

</head>

<body>

<?

$username=$_POST["username"];

$password=$_POST["password"];

?>

Username : <?echo $username?>

<br>

Password : <?echo $password?>

<br>

</body>

</html>

4. Perbandingan 2 bilangan menggunakan metode : POST

a. Untuk membuat inputan, dan beri nama file : bandingnilai.php

<html>

<head>


</head>

<body>

<form action="proc_post.php" method="post">

Bil I :

<input type="text" name="bil1">

<br>

Bil II:

<input type="text" name="bil2">

<br>

<input type="submit" value="Bandingkan">

</form>

</body>

</html>

b. Buat file untuk memproses variabel, beri nama filenya : proc_post.php

<html>

<head>

<title>Proses Input</title>

</head>

<body>

<?

$bil1=$_POST["bil1"];

$bil2=$_POST["bil2"];

?>

<h1>Perbandingan Bilangan </h1>

<hr>

Bil I : <?echo $bil1?>

<br>

Bil II: <?echo $bil2?>

<br>

<?

if ($bil1<$bil2){

echo "$bil1 lebih kecil dari $bil2";

}

elseif($bil1>$bil2){

echo "$bil1 lebih besar dari $bil2";

}

else{

echo "$bil1 sama dengan $bil2";

}

?>

</body>

</html>

5. Pemrosesan Buku Tamu dengan metode : POST

a. Untuk membuat inputan, dan beri nama file : bukutamu.php

<html>

<head>


</head>

<body>

<h1>Buku Tamu</h1>

Komentar dan saran sangat kami butuhkan untuk

meningkatkan kualitas situs kami.

<hr>

<form action="proc_bukutamu.php" method="post">

<pre>

Nama anda : <input type="text" name="nama" size="25"

maxlength="50">

Email address : <input type="text" name="email" size="25"

maxlength="50">

Komentar : <textarea name="komentar" cols="40"

rows="5"> </textarea>

<input type="submit" value="kirim">

<input type="reset" value="ulangi">

</pre>

</form>

</body>

</html>

b. Buat file untuk memproses variabel, beri nama filenya : proc_bukutamu.php

<html>

<head>

<title>Buku Tamu</title>

</head>

<body>

<?

$nama=$_POST["nama"];

$email=$_POST["email"];

$komentar=$_POST["komentar"];

?>

<h1>Data Buku Tamu </h1>

<hr>

Nama anda : <?echo $nama?>

<br>

Email address : <?echo $email?>

<br>

Komentar :

<textarea name="komentar" cols="40"

rows="5"><?echo $komentar?> </textarea>

<br>

</body>

</html>

6. Penyimpanan file yang di-Upload, dengan nama file yang tersimpan sama semuanya.

Sebelum menjalankan program dibawah ini, maka register_globals yang ada di php.ini harus

di-on-kan terlebih dahulu.

a. Untuk membuat inputan, dan beri nama file : fileupload.php

<html>

<head>

<title>Form untuk input nama file</title>

</head>

<body>

<h1>Input nama file untuk Upload</h1>

<br>Klik Browse untuk memilih !

<form enctype="multipart/form-data" method="post"

action="do_upload.php">

<input type="hidden" name="MAX_FILE_SIZE" value="10000">

Nama File : <input type="file" name="file1" size="30">

<br>

<input type="submit" value="Upload">

</form>

</body>

</html>

b. Buat file untuk memproses variabel, beri nama filenya : do_upload.php, hasil upload bisa

dilihat di direktori tempat menyimpan file php.

<html>

<head>

<title></title>

</head>

<body>

<h1>Simpan file yang diupload</h1>

<br>

<?

if ($file1!="none") {

copy("$file1","hasilupload.txt") or

die ("No files");

}

else {

die("Tidak ada file yang diupload");

}

?>

</body>

</html>

Pada tag form_upload atribut enctype=”multipart/form-data” harus ada. Atribut ini akan

digunakan untuk memberitahu browser dan server bahwa yang dikirim bukan hanya data nama

file, namun juga isi dari nama file.

Diperlukan juga sebuah variabel dengan nama MAX_FILE_SIZE dengan tipe hidden, yang

harus disediakan untuk mengendalikan besar file maksimum yang diupload ke server. Variabel

ini harus diletakkan sebelum input dengan type ’file’, nilai pada atribut value menunjukkan

jumlah byte maksimum.

7. Cara lain untuk memproses file upload dengan nama file yang berbeda ->

$HTTP_POST_FILES

Ganti program 5.b. dengan program dibawah ini, dengan terlebih dahulu membuat folder

dengan nama files di directory tempat menyimpan file php.

<html>

<head>

<title></title>

</head>

<body>

<h1>Simpan file yang diupload</h1>

<?

$namafile = $HTTP_POST_FILES['file1']['name'];

?>

<p>Nama File : <?echo $namafile;?></p>

<br>

<?

if ($file1!="none") {

copy("$file1","files/$namafile") or

die ("No files");

}

else {

die("Tidak ada file yang diupload");

}

?>

</body>

</html>

4.2. Membuka koneksi ke server MySQL

mysql_connect()

Digunakan untuk melakukan uji dan koneksi kepada server database MySQL.

Sintaks :

$conn = mysql_connect (”host”,”username”,”password”);

$conn adalah nama variabel penampung 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.

4.3. Memilih database yang akan digunakan di server

mysql_select_db()

Digunakan untuk melakukan koneksi kepada database yang dalam server yang berhasil

dikoneksi dengan perintah mysql_connect().

Sintaks :

$pilih = mysql_select_db(”namadatabase”,$conn);

$pilih berisi status koneksi kepada database.

$conn merupakan koneksi kepada server database yang berhasil.

namadatabase adalah nama database yang akan dikenai proses.

4.4. Mengambil sebuah query dari sebuah database.

mysql_query()

Digunakan untuk melakukan eksekusi perintah SQL untuk memanipulasi database yang

berhasil dilakukan koneksinya menggunakan mysql_select_db().

Sintaks :

$hasil = mysql_query(”SQL Statement”);

$hasil akan berupa record set apabila SQL Statement berupa perintah select.

4.5. 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 array asosiatif.

Sintaks :

$row = mysql_fetch_assoc($hasil);

c. mysql_fetch_row()

Fungsi ini hampir sama dengan fungsi mysql_fetch_array(), hanya saja array yang dihasilkan

hanya array numeris.

Sintaks :

$row = mysql_fetch_row($hasil);

d. mysql_num_rows()

Fungsi ini digunakan untuk menghitung jumlah record yang ada pada database.

Sintaks :

$count = mysql_num_rows($hasil);

$count akan memiliki nilai sesuai dengan jumlah record yang ada.

4.6 LATIHAN KONEKSI PHP MySQL

1. Menguji interkoneksi PHP dengan MySQL.

<html>

<head>

<title>Koneksi Database MySQL</title>

</head>

<body>

<h1>Demo koneksi database MySQL</h1>

<?

$conn=mysql_connect ("localhost","root","");

if ($conn) {

echo "OK";

} else {

echo "Server not connected";

}

?>

</body>

</html>

2. Melihat perbedaan antara mysql_fetch_array(), mysql_fetch_assoc(), mysql_fetch_row().

a. Buatlah tabel liga berikut ini, dengan 3 field : kode, negara, champion.

Create table liga (

kode char(3) not null,

negara char(15),

champion int

);

b. Isilah tabel dengan data berikut ini :

Insert into liga (kode, negara, champion) values (‘jer’,’Jerman’,4);

Insert into liga (kode, negara, champion) values (‘spa’,’Spanyol’,4);

Insert into liga (kode, negara, champion) values (‘ing’,’Inggris’,3);

Insert into liga (kode, negara, champion) values (‘bel’,’Belanda’,3);

c. Akses databases menggunakan mysql_fetch_array()

<HTML>

<HEAD>


</HEAD>

<BODY>

<h1>Koneksi database dengan mysql_fetch_array</h1>

<?

$conn=mysql_connect ("localhost","root","")

or die ("koneksi gagal");

mysql_select_db("faruq",$conn);

$hasil = mysql_query("select * from liga",$conn);

while ($row=mysql_fetch_array($hasil)) {

echo "Liga " .$row["negara"]; //array asosiatif

echo " mempunyai " .$row[2]; //array numeris

echo " wakil di liga champion <br>";

}

?>

</BODY>

</HTML>

d. Akses databases menggunakan mysql_fetch_assoc()

<HTML>

<HEAD>


</HEAD>

<BODY>

<h1>Koneksi database dengan mysql_fetch_assoc</h1>

<?





while ($row=mysql_fetch_array($hasil)) {

echo "Liga " .$row["negara"];

echo " mempunyai " .$row[“champion”];


}

?>

</BODY>

</HTML>

e. Akses databases menggunakan mysql_fetch_row()

<HTML>

<HEAD>


</HEAD>

<BODY>

<h1>Koneksi database dengan mysql_fetch_assoc</h1>

<?





while ($row=mysql_fetch_row($hasil)) {

echo "Liga " .$row[1];

echo " mempunyai " .$row[2];


}

?>

</BODY>

</HTML>

3. Membuat Buku Tamu

a. Buatlah tabel bukutamu yang memiliki 3 field : nama, email, komentar.

Create table bukutamu (


email char(20),

komentar char (40)

);

b. Buat form untuk buku tamu, beri nama bukutamu.htm

<HTML>

<HEAD>

<title>Buku Tamu</title>

</HEAD>

<BODY>

<h1>Buku Tamu untuk database MySQL</h1>

<form action="bukutamu_add_form.php" method="post">

Nama : <input type="text" name="nama" size="35" maxlength="50"> <br>

Email : <input type="text" name="email" size="35" maxlength="50"> <br>

Komentar : <textarea name="komentar" rows="5" cols="30"></textarea> <br>

<input type="submit" value="Simpan">

<input type="reset" value="Reset">

</form>

</BODY>

</HTML>

c. Buat file bukutamu_add_form.php untuk memproses data dari bukutamu.htm dan

menambahkan data ke tabel bukutamu.

<HTML>

<HEAD>

<title>Simpan Buku Tamu</title>

</HEAD>

<BODY>

<h1>Simpan Buku Tamu MySQL</h1>

<?

$nama = $_POST["nama"];

$email = $_POST["email"];

$komentar = $_POST["komentar"];




echo "Nama : $nama <br>";

echo "Email : $email <br>";

echo "Komentar : $komentar <br>";

$sqlstr="insert into bukutamu (nama,email,komentar)

values ('$nama','$email','$komentar')";

$hasil = mysql_query($sqlstr,$conn);

echo "Simpan bukutamu berhasil dilakukan";

?>

</BODY>

</HTML>

d. Buat file view.php untuk menampilkan isi buku tamu.

<?

$conn = mysql_connect("localhost","root","");


$hasil = mysql_query("select * from bukutamu",$conn);

$jumlah = mysql_num_rows($hasil);

echo "<center>Daftar Pengunjung</center>";

echo "Jumlah pengunjung : $jumlah";

$a=1;

while($baris = mysql_fetch_array($hasil))

{

echo "<br>";

echo $a;

echo "<br>";

echo "Nama : ";

echo $baris[0];

echo "<br>";

echo "Email : ";

echo $baris[1];

echo "<br>";

echo "Komentar : ";

echo $baris[2];

$a++;

}

?>

4. Membuat program searching database dengan menggunakan tabel no 3a

a. Buat file search.htm

<HTML>

<HEAD>

<title>Cari Database</title>

</HEAD>

<BODY>

<h1>Searching Buku Tamu untuk database MySQL</h1>

<form action="hasilsearch.php" method="post">

<select name="kolom">

<option value="nama">nama</option>

<option value="email">email</option>

</select>

Masukkan kata yang anda cari

<input type ="text" type ="text" name="cari">

<input type ="submit" value="cari" >

</form>

</BODY>

</HTML>

b. Buat file hasilsearch.php untuk menampilkan data

<?

$kolom=$_POST['kolom'];

$cari=$_POST['cari'];

$conn=mysql_connect("localhost","root","");

mysql_select_db("faruq", $conn);

$hasil=mysql_query("select * from bukutamu where $kolom like '%$cari%'",

$conn);

$jumlah=mysql_num_rows($hasil);

echo "<br>";

echo "Ditemukan: $jumlah";

echo "<br>";

while($baris=mysql_fetch_array($hasil))

{

echo "Nama : ";

echo $baris[0];

echo "<br>";

echo "Email : ";

echo $baris[1];

echo "<br>";

echo "Komentar :";

echo $baris[2];

}

?>

pelatihan website diskominfo kukar

Documents