JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server...

35
Muhamad Alif (Dasar Servlet & HTML) 1

Transcript of JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server...

Page 1: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Muhamad Alif

(Dasar Servlet & HTML) 1

Page 2: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Server (Open Source)

Apache Jakarta Tomcat(http://jakarta.apache.org/tomcat/)

Sun Java System Application Server

Sun Java System Web Server

GlassFish

JBoss

Oracle Application Server

Page 3: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

GlassFish

Server bawaan dari netbeans

Open source

Tidak membutuhkan setting path untuk menjalankan web application

Mudah digunakan dan terjamin keamananya

Page 4: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

GlassFish

Page 5: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

GlassFish

Page 6: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Sekilah Tentang Servlet

Class pada java

Akses servlet : request-response untukprogramming model

Implement interface Servlet dan menerimarequest yang berasal dari class Java, webclient, atau servlet lain yangmembangkitkan response

"Servlet" juga dipanggil sebagai HTTPServlet

Page 7: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

lanjutan

Servlet adalah evolusi dari CommonGateway Interface (CGI)

CGI : tiap request dari client akandimasukkan dan dikeluarkan ke dan darimemori

Servlet : request akan dimasukan SEKALIke memori, dan siap melayani requestselanjutnya jika dibutuhkan

Page 8: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Servlet : kolaborasi code java yangdidalamnya terdapat client sideprogramming (html, css, javascript)

Page 9: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Web Programming Dengan Java (Netbeans)

Page 10: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans
Page 11: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans
Page 12: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans
Page 13: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Contoh Servlet Sederhana

Page 14: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans
Page 15: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans
Page 16: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Hypertext Markup Language (HTML)

HTML (HyperText Mark up Language) merupakan suatu metode untukmengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasapemrograman karena sifatnya yang hanyamemberikan tanda (marking up) pada suatunaskah teks dan bukan sebagai program.

Page 17: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

HTML dikembangkan

dari konsep SGML

HTML bukan

merupakan bahasa

pemrograman

Konsep HyperText

untuk memudahkan

mencari informasi

Standarisasi HTML

File1.html

Ini contoh suatu

hypertext dimana

jika kata

“hypertext“ ini di-

click akan

mengluarkan

informasi detail

tentang

“hypertext”.

Hypertext

adalah satu atau

beberapa text yang

dapat di-link untuk

mengeluarkan informasi

detail tentang kata

tersebut.

File2.html

Informasi

Informasi yang dapat

disampaikan melalui web

dapat berupa text, gambar,

suara, dan video

File3.html

Page 18: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

HTML

HyperText : Hubungan naskah dengan naskah lainya (konsep di internet)

Markup: Instruksi (bukan bahasa pemrograman)

Language : subset SGML (Standard Generalized Mark-up Language), kumpulan instruksi tapi bukan bahasa pemrograman

Page 19: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Fungsi Dasar HTML

Menentukan format suatu teks

Membuat list tentang sekelompok hal

Membuat link ke dokumen lain atau

bagian lain dari dokumen yang sama.

Menyisipkan citra atau gambar.

Menampilkan informasi dalam bentuk

tabel

Page 20: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Judul (Title)

Format Teks

Contoh List

Page 21: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Link

Penyisipan

Citra

Penggunaan

Tabel

Page 22: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

<HTML>

<HEAD>

<TITLE>Latihan HTML</TITLE>

</HEAD>

<BODY>

Teks yang akan ditampilkan pada bagianbody

</BODY>

</HTML>

Page 23: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Dasar HTML

Pada file HTML, karakter carriagereturns (Enter) diabaikan sehingga untukmembuat atau mendefinisikan naskah dalambentuk paragraf harus ditambahkan tagkhusus yakni <P>.

Page 24: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Tag Paragraf<HTML>

<HEAD>

<TITLE>Latihan HTML</HTML>

</HEAD>

<BODY>

Teks yang akan ditampilkan pada bagian body

<P>Paragraf satu </P>

<P>Paragraf dua </P>

</BODY>

</HTML>

Page 25: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Format Teks Tag Awal Tag Akhir

Bold <B> </B>

Italic <I> </I>

Underline <U> </U>

Monospace <TT> </TT>

Page 26: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Kombinasi Tag

<B><I>Kata-kata yang tercetak tebal danmiring</I></B>

Page 27: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Konsep Heading

• Heading 1 <H1>

• Heading 2 <H2>

• Heading 3 <H3>

• Heading 4 <H4>

• Heading 5 <H5>

• Heading 6 <H6>

Page 28: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Tag Apa Adanya (<PRE>)

Penggunaan tag <PRE> ini membuat web browser akan menampilkan dokumendalam bentuk apa adanya (karakter multi spasi, tab dan carriage return tidakdiabaikan).

Page 29: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Karakter Khusus HTMLSymbol Character Reference Entity name

< &#060; &lt;

> &#062; &gt;

¢ &#162; &cent;

£ &#163; &pound;

¥ &#165; &yen;

© &#169; &copy;

® &#174; &reg;

° &#176; &deg;

&frac14; &#188; &frac14;

&frac12; &#189; &frac12;

&frac34; &#190; &frac34;

&times; &#215; &times;

Page 30: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

<H3>Without the &lt;PRE&gt; Tag:</H3>

Hasilnya : Without the <PRE> Tag:

Page 31: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Tag <br> dan <hr>

Page 32: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

<HTML>

<HEAD>

<TITLE>Horizontal Rule and Line Break</TITLE>

</HEAD>

<BODY>

<P><B>Using &lt;BR&gt; to force a line break</B><BR>

Hi Everybody ! <BR>

My Name is Jhon <BR></P>

<P><B>Using &lt;HR&gt; to add a horizontal rule</B>

<HR>

</BODY>

</HTML>

Page 33: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

• Menggunakan tag <hr> untuk

menyisipkan garis

• Menggunakan tag <br> untuk line break

Page 34: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Penambahan Link Di HTML

• Pengertian URL– Bagaimana ?

– Siapa ?

– Dimana ?

– Apa ?

• Anchor

• HyperText

Reference

• Email link

• Link resource

network yang lain.

Http://www.ee.itb.ac.id/news/Oct98.htm

Bagaimana?

Siapa?

Dimana?

Apa?

Page 35: JSP (Dasar Servlet & HTML) - alifcintaibu.files.wordpress.com · (Dasar Servlet & HTML) 1. Server (Open Source) ... Oracle Application Server . GlassFish Server bawaan dari netbeans

Contoh Link Dalam HTML

<A HREF=http://www.yahoo.com/Home/homepage.html> Klik di sini

</A>