Wednesday, April 13, 2016

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.

Thursday, April 7, 2016

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>