Session 12 : Internet and SSL

Web Browser dan Server

Browser adalah suatu program atau software yang digunakan untuk menjelajahi internet. Web Browser dapat mengirim dan menerima email, mengelola HTML, sebagai input dan menjadikan halam web sebagai hasil output yang informatif. Dengan menggunakan web browser, para pengguna internet dapat mengakses berbagai informasi yang terdapat di internet dengan mudah. Beberapa contoh web browser yaitu Safari, Opera, Chrome, Firefox, dll.

Web Server adalah sebuah software server yang berfungsi menerima permintaan HTTP atau HTTPS dari client yang dikenal dengan web browser dan mengirimkan kembali hasilnya dalam bentuk halaman-halaman web yang umumnya berbentuk dokumen HTML. Server disebut juga host. Contoh dari web server yaitu apache.

Client connect ke server dengan menggunakan IP address dan port number

Biasanya kita mengetik www.google.com pada web browser. www.google.com ini akan ditranslate oleh DNS menjadi IP address. Contohnya bisa dilihat pada gambar diatas.

Apa itu DNS ?

DNS adalah sebuah sistem yang menyimpan informasi tentang nama host ataupun nama domain dalam bentuk distributed database di dalam jaringan komputer, misalkan : internet. DNS menyediakan IP address untuk setiap nama host dan mendata setiap mail exchange server yang menerima email untuk setiap domain. DNS adalah layanan jaringan yang menerjemahkan nama situs web menjadi alamat internet.

SSL (Secure Socket Layer)

SSL adalah protokol keamanan yang digunakan pada hampir semua transaksi aman pada internet. SSL mengubah suatu protokol transport seperti TCP menjadi sebuah saluran komunikasi aman yang cocok untuk transaksi yang sensitif seperti Internet Banking, dll.

Contoh web yang menggunakan SSL :

Web server harus memiliki sertifikat SSL sebelum dapat membuat koneksi SSL. Ketika seseorang mengaktifkan protokol SSL di server web mereka, mereka diminta untuk menjawab pertanyaan yang akan membangun identitas mereka. Setelah sertifikat SSL sudah ada, server web menciptakan dua kunci kriptografi. Pertama adalah kunci pribadi dan yang kedua adalah kunci publik. Kunci ini digunakan bersama dengan ruma enkripsi untuk menciptakan keamanan hubungan antara web server dan sesi browser.

Penggunaan SSL ini tidak gratis, biaya yang harus dikeluarkan bergantung pada banyak faktor seperti contohnya adalah tingkat keamanan web. SSL strength adalah level enkripsi yang digunakan saat mengirim data. Ketika kita sudah membeli sertifikat SSL, maka tinggal menginstallnya ke website kita. Ketika sudah terinstall maka kita dapat menggunakan SSL untuk mengirimkan data melalui jaringan yang aman.

Mengapa perlu menggunakan SSL ?

Alasan utama adalah untuk menjaga informasi sensitif selama dalam proses pengiriman melalui internet dengan cara enkripsi. Hal ini sangat penting, karena informasi yang kita kirimkan di internet membutuhkan proses perjalanan dari komputer ke komputer sampai mencapai server tujuan. Komputer lain yang ada diantara kita dan server dapat melihat nomor kartu kredit kita, password, dan informasi sensitif yang lainnya bila data yang kita kirim tidak dienkripsi dengan sertifikat SSL. Ketika sertifikat SSL digunakan, informasi menjadi tidak dapat terbaca oleh siapapun kecuali ke server yang memang dituju saat mengirim informasi tersebut. Hal ini melindungi informasi tersebut dari hackers dan pencuri identitas.

Cara membuat SSL :

1. Membuat keystore file.

2. Mengaktifkan SSL di tomcat dengan cara mengedit file server.xml

Pada gambar diatas, connector portnya adalah 8443 dan merupakan spesifikasi dari protokol TSL. Secara default, file server.xml akan mendefinisikan protokol sebagai TSL, bukan SSL.

3. Test koneksi lokal SSL dengan cara restart tomcat dan memasukkan url https://localhost:8443 pada web browser. Jika berhasil, maka akan muncul satu atau lebih warning dialog.

Berikut merupakan solusi dari masalah umum yang biasanya dihadapi saat membuat koneksi lokal SSL :

Session 10 : JSP Standard Tag Library

JSTL merupakan singkatan dari Java Standard Tag Library. JSTL adalah kumpulan tag di luar tag standar HTML yang bisa digunakan dalam file JSP.

Agar JSTL bisa digunakan maka sebelumnya harus mendeklarasikannya terlebih dahulu di bagian atas file JSP seperti dibawah ini :

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

JSTL memiliki beberapa tag, yaitu :

• Core. url : http://java.sun.com/jsp/jstl/core
• Formatting. url : http://java.sun.com/jsp/jstl/fmt
• SQL. url : http://java.sun.com/jsp/jstl/sql
• XML. url : http://java.sun.com/jsp/jstl/xml
• Functions. url : http://java.sun.com/jsp/jstl/fn

Beberapa contoh core tags :

JSTL core library :

JSP vs JSP with JSTL

JSTL Core memiliki beberapa kategori yaitu :
1. General Purpose Tags
<c:out>
Tag ini menerima sebuah EL(Expression Language) expression, mengevaluasi hasilnya dan kemudian menampilkan hasil secara langsung kepada objek writer yang sesuai dengan halaman output. Dengan kata lain, tag ini akan menuliskan kata yang tertulis dalam atribut value dan dalam bentuk non-XML tags.
Contoh code <c:out> sebagai berikut :

<c:set>
Tag ini dapat mengatur variable di dalam scope tertentu sehingga dapat digunakan setelahnya oleh JSP atau disuatu tempat di dalam aplikasi. Action ini memiliki atribut:
- Value : nilai yang akan diatur ke dalam target bean.
- Var : nama dari sebuah variable yang akan diatur didalam scope tertentu.
- Scope : menjelaskan variable scope yang dijelaskan oleh atribut var.

<c:remove>
Tag ini adalah kebalikan dari tag set. Tag ini akan menghapus variable yang telah dibuat oleh tag set. Tag ini memiliki dua atribut :
- Scope : scope variable yang akan dihapus.
- Var : nama variable yang akan dihapus dari scope tertentu.


2. Iteration
<c:forEach>
Tag iterasi pada primitive arrays mempunyai atribut :
- Var : mendefinisikan nama variable  yang digunakan untuk menampilkan nilai tertentu pada iterasi ke tag body
- items : kumpulan koleksi untuk diulang lagi
- varStatus : mendefinisikan nama variable  yang dapat diakses oleh body loop untuk mendapatkan informasi pada status loop tertentu (optional).
- begin : integer value yang mendefinisikan index, dipakai untuk memulai iterasi (optional)
- end : integer value yang mendefinisikan index, dipakai untuk mengakhiri iterasi (optional)
- step : integer value yang mendefinisikan ukuran yang dipakai selama iterasi (optional)
Berikut adalah contoh code <c:forEach>

<c:forTokens>
Tag iterasi lainnya yang disediakan oleh JSTL. Atribut forTokens sama dengan atribut forEach, namun forTokens memiliki tambahan 1 atribut yaitu delimiter : atribut untuk memecah string. Contoh code <c:forTokens> adalah sebagai berikut :

3. Conditional
<c:if>
Tag ini akan dieksekusi jika nilai yang dievaluasi pada atribut "test"-nya bernilai "true". Berikut adalah contoh penggunaan code <c:if>

<c:choose><c:when><c:otherwise>
Tag choose pada JSP bertindak seperti keyword switch pada java dengan tag when sebagai case dan otherwise sebagai default. Berikut adalah contoh codenya :

Session 9 : JSP and JavaBeans

JavaBeans
Merupakan sebuah komponen dalam Java untuk mengurangi jumlah code Java sehingga dapat memudahkan non-programmer untuk membuat web berbasis JSP yang bekerja dengan berbagai class.
Pada saat membuat class yang mendefinisikan JavaBean, atau bean, kita dapat menggunakan JSP tags special untuk membuatnya bekerja.

Terdapat 3 aturan yang harus dipatuhi dalam membuat JavaBeans, yaitu:

1. Sebuah JavaBeans harus mengandung constructor yang tidak menerima argumen apapun.
2. Semua variable tidak boleh bersifat public (harus di deklarasi secara private).
3. Harus mengandung fungsi setter getter yang dapat di akses oleh JSP.

Contoh JavaBeans:

package business;

import java.io.Serializable;

public class User implements Serializable

{

    private String firstName;

    

    public User()

    {

        firstName = "“;

    }

    public User(String first)

    {

        firstName = first;

    }

    public void setFirstName(String f)

    {

        firstName = f;

    }

    public String getFirstName()

    {

        return firstName;

    }

}

Contoh pemanggilan JavaBeans:

JavaBeans memiliki kapabilitas untuk melakukan hal yang lebih banyak daripada hanya sekedar mendefinisikan objek bisnis. JavaBeans juga dapat digunakan untuk mendefinisikan buttons dan berbagai user interface controls.

EJB (Enterprise JavaBean) merupakan tipe lain dari JavaBeans. dalam beberapa hal, EJB sangat mirip dengan JavaBeans. Tetapi EJB memiliki code yang lebih kompleks dan sulit daripada JavaBeans.

cara JSP engine melakukan konversi tipe data secara otomatis:

tag useBean digunakan untuk mengakses atau membuat objek bean.

tag getProperty digunakan untuk mendapatkan properti dari objek.

tag setProperty digunakan untuk melakukan setting properti kepada sebuah objek.

sequence special di dalam attribute:

Contoh JavaBeans yang memiliki sifat return value:

– Create New -> Java Class
•Class Name = Hello (Hello.java)
•Package Name = beanExample

package beanExample; 

public class Hello {
     private String myText="Hello<br/>This is JavaBean text"; 

     public String getText(){
          return myText;
     }
}

Membuat index.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   "http://www.w3.org/TR/html4/loose.dtd">

<jsp:useBean id="myBean" class="beanExample.Hello" />

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>JSP and JavaBean</title>

    </head>

    <body>

        <%= myBean.getMyText() %>

    </body>

</html>

Session 6 & 7 : JSP - Fundamental & JSP - Web Application

JSP - Fundamental

JSP (Java Server Pages) merupakan salah satu teknologi web application berbasis bahasa Java dan berjalan pada platform Java. JSP merupakan server side programming sehingga JSP memerlukan sebuah web server (tomcat) untuk dapat menjalankan pemrograman JSP. extension dari JSP adalah .jsp dan kita tidak dapat melihat source code yang telah dibuat di dalam browser.

Terdapat 5 Jenis JSP tags:

• JSP scriplet

merupakan tag scriplet yang dapat menerima semua statement JAVA, mulai dari variable declaration, expression, dan sebagainya. format penulisan JSP scriplet adalah <% code %>
Contoh :

<html>

    <head>

        <title>JSP Page</title>

    </head>

    <body>

        <p>Hello World!</p>

        <%-- JSP comment --%>
              <%
                    out.println("this text created by JSP");
              %>

    </body>

</html>

• JSP Expression

elemen JSP expression mengandung expresi bahasa scripting yang telah dievaluasi, diconvert ke dalam bentuk string, dan dimasukkan ke posisi expression tersebut muncul dalam file JSP.
Karena nilai dari expression diconvert ke dalam string, maka kita dapat menggunakan expression ke dalam 1 baris text di dalam file JSP. format penulisan adalah <%= expression %>

Contoh:

<html>

<head><title>A Comment Test</title>

</head>

<body>

<p>

   Today's date: <%= (new java.util.Date()).toLocaleString()%>

</p>

</body>

</html>

• JSP Directive

JSP directive akan mempengaruhi keseluruhan struktur dari class servlet. format penulisan adalah <%@ directive attribute = "value" %>

• JSP Comment

Terdapat beberapa cara dalam menuliskan comment di JSP. cara tersebut adalah:

• JSP Declaration

merupakan tags yang digunakan untuk melakukan deklarasi variable yang dapat digunakan oleh code Java selanjutnya di dalam file JSP. kita harus melakukan deklarasi variable sebelum menggunakannya di dalam file JSP. format penulisannya adalah <%! declaration;[declaration;]+... %>

Contoh:

<%! int i = 0; %>

<%! int a, b, c; %>

<%! Circle a = new Circle(2.0); %>

JSP - Web Application

• HTTP GET dan HTTP POST method

GET method
secara default, Get method digunakan di dalam form tag, tetapi kita juga dapat mespesifikasikan Get method secara eksplisit. semua parameter yang dikirim menggunakan GET method akan ditampilkan di lokasi address URL browser.

1. GET method digunakan pada saat kita ingin mengambil data dari server.
2. Bekerja sedikit lebih cepat daripada POST method
3. Dengan menggunakan GET method, kita dapat melakukan bookmark terhadap page yang diinginkan.

POST method

1. POST method tidak menampilkan parameter ke dalam URL, sehingga lebih baik digunakan ketika mengandung data yang bersifat sensitif.
2. Dengan menggunakan POST method, kita tidak dapat melakukan bookmark terhadap page yang diinginkan, karena parameter tidak dikirimkan bersama dengan URL.
3. jika parameter mengandung lebih dari 4KB data, maka GET method tidak dapat bekerja, sehingga kita harus menggunakan POST method.
4. POST method digunakan ketika kita ingin menulis data ke dalam server.

Terdapat 3 cara untuk mengambil data dalam request object:

Error yang sering terjadi dalam JSP:

• HTTP Status 404 - File Not Found Error
• HTTP Status 500 - Internal Server Error

Tips untuk memperbaiki JSP error:

• pastikan bahwa tomcat server sudah berjalan.
• pastikan bahwa URL y ang dikirimkan telah valid dan mengarahkan ke lokasi page yang direquest.
• pastikan bahwa semua file HTML, JSP, dan Class JAVA telah berada pada lokasi yang tepat.
• membaca halaman error dengan seksama untuk mendapatkan semua informasi mengenai error yang didapat.

Session 4 : JavaScript - Fundamental

JavaScript merupakan salah satu bahasa pemrograman tingkat tinggi dan dinamis. JavaScript bekerja pada client server, oleh karena itu JavaScript disebut sebagai Client-Side Programming. JavaScript memiliki extensi .js dan dapat dikombinasikan dengan dengan HTML dan juga CSS. Bahasa pemrograman JavaScript dapat dimasukan ke dalam HTML menggunakan tag <script>. Dengan memasukkan JavaScript ke dalam HTML, maka website yang dibuat akan menjadi lebih interaktif.


Terdapat 2 jenis JavaScript:

• Internal JavaScript 

Merupakan script yang terletak di dalam HTML

….<body>
<script type="text/javascript">
document.write("<p>My JavaScript Text</p>");
</script>
</body>….

• External JavaScript 

Merupakan script yang terletak pada file lain yang memiliki extensi .js
<script type="text/javascript" src="filename.js"></script>


Peraturan dalam membuat variable di JavaScript:

• Dapat mengandung huruf, angka 0-9, dan underscore.
• Tidak boleh mengandung spasi ataupun karakter tanda baca.
• Karakter pertama dari sebuah variable harus berupa huruf atau underscore.
• Case Sensitive.
• Harus dibuat dalam satu baris.

Built-In objects:

• String
• Array
• Date
• Math
• Window

String Object Methods:

Jawaban Case:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>JavaScript</title>

<style>

h1

{

    text-align:center;

}

body

{

    background-color:#999999;

}

table

{

width:100%;

}

.attribute

{

width:100%;

border-color:#0000FF;

}

#submit

{

float:right;

}

</style>

</head>

<body>

    <h1>Registration Form</h1>

    <form method="post" action="#">

    

    <table>

    <tr>

        <td>

            Nama

            </td>

            <td>

            <input type="text" name="txtNama" id="nama" placeholder="Masukkan Nama" class="attribute" />

            </td>

        </tr>

        

        

        <tr>

        <td>

            Alamat

            </td>

            <td>

<textarea name="txtAlamat" id="alamat" class="attribute"></textarea>

            </td>

        </tr>

        

        <tr>

        <td>

            Telp

            </td>

            <td>

<input type="text" name="txtTelp" id="telp" class="attribute" />

            </td>

        </tr>

        

        <tr>

        <td colspan="2">

<input type="radio" name="gender" value="Male" />Male

<input type="radio" name="gender" value="Female" />Female            

            </td>

        

        </tr>

        

        <tr>

        <td colspan="2">

<input type="submit" value="submit" id="submit" onclick = "validateForm()"/>

            </td>

        </tr>

    

    </table>

    </form>

<script>

function validateForm()

{

var nama = document.getElementById('nama');

var alamat = document.getElementById('alamat');

var telp = document.getElementById('telp');

var gender = document.getElementsByName('gender');

if(nama.value == "")

{

alert("Nama Harus diisi");

}

else if(alamat.value.search("jalan") == -1)

{

alert("alamat harus mengandung kata jalan");

}

else if(isNaN(telp.value))

{

alert("Telepon Harus mengandung angka");

}

else if(!gender[0].checked && !gender[1].checked)

{

alert("Gender Harus dipilih");

}

else

{

alert("Registration Success");

}

}

</script>

</body>

</html>

Session 3 : HTML - Forms

Form merupakan salah satu elemen penting yang terdapat dalam HTML. Form digunakan dengan tujuan untuk mengumpulkan data dari user yang mengunjungi suatu website.

sebuah HTML form dapat mengandung beberapa control field seperti:

• Text boxes
• Text Area
• Radio Button
• Check Boxes
• Combo Boxes
• dan sebagainya....

selain itu, HTML form juga dapat mengandung sebuah submit button yang berfungsi untuk memanggil fungsi JSP (servlet) ketika user melakukan klik pada button tersebut.

Sebuah HTML document dapat memiliki lebih dari 1 HTML form.

Untuk membuat form dalam suatu HTML document, kita dapat menggunakan tag <form> dimana memiliki format:
<form arguments>
        Input elements ......
</form>

beberapa contoh arguments yang dapat diberikan ketika membuat suatu HTML form:

• action="url" : menspesifikasikan lokasi pengiriman data ketika tombol submit diclick.
• method="(get/post)" : menspesifikasikan metode pengiriman data yang dilakukan, terdapat 2 metode, yaitu get dan post. perbedaan get dengan post adalah jika kita menggunakan get, maka semua data yang kita telah isi sebelumnya akan dikirim langsung melalui url, sehingga dengan menggunakan get, kita dapat melakukan bookmark pada halaman tersebut. sedangkan pada metode post, data yang telah diisi akan dikirim secara sistem, sehingga data-data penting seperti password tidak akan terlihat pada url.
• target="target" : menspesifikasikan lokasi url action dibuka pada browser, _blank berarti url akan dibuka pada window baru, sedangkan _top berarti url akan dibuka pada window yang sama.

beberapa contoh pembuatan element input:

Text Field:

    <input type="text" name="textfield" value="initial value">

Text Area:

    <textarea name="textarea" cols="20" rows="2">Hello World</textarea>

Password Field:

    <input type="password" name="textfield3">

Radio buttons:

   <input type="radio" name="radiobutton" value="myValue1">male<br>

   <input type="radio" name="radiobutton" value="myValue2" checked>female

cara untuk mengelompokan radio button adalah dengan memberikan nama yang sama.

Submit Button:

    <input type="submit" name="Submit" value="Submit">

Reset Button:

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

Berikut adalah contoh dari HTML form:

<html>

<head>

<title>Registration page</title>

</head>

<h2>REGISTRATION PAGE</h2>

    

    <form action="#" method="post" target="_top">

    <table>

    <tr>

        <td>Name</td>

            <td>

            <input type="text" name="Name" />

            </td>

        </tr>

        

        <tr>

        <td>Password</td>

            <td>

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

            </td>

        </tr>

        

        <tr>

        <td>Email</td>

            <td>

            <input type="text" name="Email" />

            </td>

        </tr>

        

        <tr>

        <td>Country</td>

            <td>

            <select name="country">

                <option value="Indonesia">Indonesia</option>

                    <option value="Singapura">Singapura</option>

                    <option value="Malaysia">Malaysia</option>

                </select>

            </td>

        </tr>

        

        <tr>

        <td></td>

            <td>

            <input type="checkbox" name="Agree" />I agree

            </td>

        </tr>

        

        <tr>

        <td></td>

            <td>

            <input type="submit" name="Register" value="Register" />

            </td>

        </tr>

    </table>

    </form>

<body>

</body>

</html>

hasil dari HTML document tersebut adalah:

Session 2 : HTML - Web Design Fundamental

HTML(HyperText Markup Language) digunakan untuk menyediakan tampilan user interface dalam sebuah web application.

Keyword-keyword penting dalam HTML (tag names) menggunakan angle bracket sebagai tanda pembuka dan penutup. contoh : <html> <table>. Terdapat 2 jenis HTML tags:

HTML tags yang berpasangan, yaitu opening tag (contoh: <b>), dan closing tag (contoh: </b>).
HTML tags yang tidak berpasangan, contoh: <img />.

Keyword yang digunakan di dalam HTML bersifat case insensitive, sehingga antara <b> ataupun <B> akan memberikan hasil yang sama.

Software yang dapat digunakan untuk membuat sebuah HTML documents yaitu Notepad, Textpad, Adobe Dreamweaver, Netbeans, Sublime, dan sebagainya.

Basic HTML tags:

<!-- create comment -->

<html>

      <head>

             <title>………….</title>

      </head>

      <body>

              ………..

     </body>

</html>


contoh HTML dasar:

<html>

     <head>

            <title>My First HTML</title>

     </head>

     <body>

            Hello World

     </body>

</html>


Berikut adalah beberapa jenis HTML tags dasar yang sering digunakan:




untuk membuat table dalam HTML, terdapat beberapa HTML tags yang harus diperhatikan, yaitu:

• <table> </table> : membuat table baru.
• <tr> </tr> : membuat baris baru dalam table.
• <td> </td> : membuat kolom baru dalam suatu baris.
• <th> </th> : membuat header dalam suatu table.Format HTML tags untuk membuat table:

dalam membuat table, juga terdapat HTML tags yang dapat digunakan untuk menggabungkan kolom (colspan) ataupun baris (rowspan).

<!DOCTYPE html>
<html>
<head>
<title>Contoh Penggunaan Atribut Colspan dan Rowspan Tag Tabel</title>
</head>
<body>
<h1>Contoh atribut colspan dan rowspan </h1>
<table border="1">
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td colspan="2" >Baris 2, Kolom 2 & 3</td>
    </tr>
    <tr>
        <td rowspan="2"> Baris 3 & 4, Kolom 1</td>
        <td> Baris 3, Kolom 2</td>
        <td> Baris 3, Kolom 3</td>
    </tr>
    <tr>
        <td> Baris 4, Kolom 2</td>
        <td> Baris 4, Kolom 3</td>
    </tr>
</table>
</body>
</html>




hasil dari HTML tersebut adalah:






Selain untuk membuat table, terdapat juga contoh HTML tags lain dengan fungsi yang berbeda-beda, salah satunya adalah image tags <img /> yang digunakan memasukan gambar ke dalam sebuah website.


Style Sheet atau Cascading Style Sheet digunakan untuk mengatur tampilan web supaya terlihat lebih rapi dan menarik. Dengan adanya CSS, maka kita dapat menampilkan halaman web yang sama dengan format tampilan yang berbeda-beda.

Terdapat 3 cara untuk membuat CSS dalam sebuah HTML, yaitu inline CSS, Internal CSS, dan juga External CSS.

untuk menggunakan External CSS, kita harus menambahkan sebuah tag yang menghubungkan file HTML dengan file CSS yang sudah dibuat. tag yang harus dimasukkan adalah:

<link rel="stylesheet" type="text/css" href="myFile.css" />

dalam pengaturan CSS, terdapat 2 bagian utama, yaitu selector yang merupakan element HTML yang ingin di desain, dan declaration yang terdiri dari property dan value.