Web Programming: 2016

Kamis, 02 Juni 2016

Pertemuan 10 - JSP Standard Tag Library

JSTL atau JSP Standard Tag Library menyediakan berbagai tag umum yang berguna dalam menggunakan JSP. JSTL mampu mengurangi beban scripting, tetapi untuk penggunaannya, JSTL perlu mengikutsertakan JSTL library.

Untuk mengunakan JSTL, kita memerlukan JSTL Core Library. Dimana untuk menggunakannya, dibutuhkan <taglib> yang diletakkan di atas dari setiap JSP yang menggunakan library tersebut.

berikut contohnya:

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

Tag JSTL bisa dikasifikasikan menurut fungsinya sebagai berikut:

- Core Tags

- Formatting Tags

- SQL Tags

- XML Tags

- JSTL Functions

berikut contoh dari Core Tags:

JSTL core library:

JSP code with JSTL

<a href="<c:url value='/index.jsp' />">Go to index</a>

Equivalent scripting

<a href="<%=response.encodeURL("index.jsp")%>"> Go to index</a>

<c:out>

tag <c:out> akan menampilkan hasil seperti penggunaan tag <%=%>

contoh:

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

<html>

<head><title><c:out> Tag Example</title>

</head>

<body>

<c:out value="${'<tag> , &'}"/>

</body>

</html>

<c:if>

tag ini akan menjalankan isinya apabila hasil evaluasinya adalah true

contoh:

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

<html>

<head>

<title><c:if> Tag Example</title>

</head>

<body>

<c:set var="salary" scope="session" value="${2000*2}"/>

<c:if test="${salary > 2000}">

<p>My salary is: <c:out value="${salary}"/><p>

</c:if>

</body>

</html>

<c:choose>

<c:forEach>

hasilnya:

<c:forTokens>

hasilnya:

Kamis, 26 Mei 2016

Pertemuan 9 - JSP and JavaBeans

JavaBeans:
- dapat mengurangi penggunaan code java dan membuatnya lebih mudah bagi yang buan merupakan programer untuk membuat JSP yang bekerja dengan kelas bisnis
- ketika kita menggunakan JSP atau Bean dalam sebuah kelas, kita bisa menggunakan tags khusus JSP untuk mengolah data yang ada.

Ada 3 aturan yang dalam penggunaan JavaBeans:
- harus memiliki sebuah constructor yang tidak berisi argumen apapun alias kosong
- semua fungsi dalam bentuk private
- harus memiliki method get dan set

Contoh code JavaBean untuk Class User:

package business;

import java.io.Serializable;

public class User implements Serializable

{

private String firstNamel

public User()

{

firstName = "";

}

public User(String first)

{

firstName = first;

}

public void setFirstName(String f)

{

firstName = f;

}

public String getFirstName()

{

return firstName;

}

JavaBeans mampu melakukan lebih dari sekedar pendefinisian objek bisnis.

JavaBeans bisa digunakan untuk mendefinisikan tombol ataupun control pasa user interface lainnya.

Enterprise JavaBean (EJB)

- merupakan tipe lain dari JavaBean

- EJB mirip dengan JavaBeans

- Lebih sulit dan kompleks untuk dicodingkan daripada JavaBeans

Berikut beberapa code yang digunakan dalam JSP untuk JavaBeans;

- useBean -> tag ini berguna untuk mengakses atau membuat sebuah objek bean

- getProperty -> tag yang digunakan untuk mengambil properti dari sebuah objek

- setProperty -> tag yang digunakan untuk menaruh properti ke sebuah ojbjek

Contoh penggunaan tag JSP untuk JavaBeans:

1. pembuatan JavaBean

package javaBeanPackageName;

public class javaBeanName {

private String firstName;

public void setFirstName(String f){

firstName = f;

}

public String getFirstName(){

return firstName;

}

2. pengunaan JavaBean dalam code JSP

<jsp:useBean id="myBean" class=" javaBeanPackageName.javaBeanName" />

<% myBean.setFirstName(“FirstName”); %>

<%= myBean.getFirstName() %>

Kita bisa mnggunakan JavaBeans dan tag JSP bersamaan dengan MVC pattern dan Arsitektur Model 1.

Pemilihannya tergantung dari permintaan proses dari aplikasi yang akan dibuat.

Rabu, 06 April 2016

Pertemuan 4 - JavaScript - Fundamental

Pada pertemuan ini kita kami diberikan tugas untuk membuat suatu tampilan web menggunakan JavaScript.

Berikut tampilan codenya:

<html>
<head>
<title>Untitled Document</title>

<style>
.full
{
width:100%;
border-color:#00C;
}

#kanan{
float:right;
}

body
{
background-color:#666;
}

</style>
</head>

<body>
<center><h1> Registration Form </h1></center>
<br>
<form>
<table>
<tr>
<td><label> Name </label></td>
<td class="full"> <input type="text" placeholder="Name" class="full" id="name"/> </td>
</tr>

<tr>
<td><label> Address </label></td>
<td class="full"> <textarea placeholder="Address" class="full" id="address"></textarea> </td>
</tr>

<tr>
<td><label> Phone </label></td>
<td class="full"> <input type="text" placeholder="Phone" class="full" id="phone"/> </td>
</tr>

<tr>
<td><label> Gender </label></td>
<td> <input type="radio" name="rdoGender"> Male
<input type="radio" name="rdoGender"> Female </td>
</tr>

<tr>
<td></td>
<td class="full"> <input type="submit" value="submit" id="kanan" onClick="validate()"> </td>
</tr>
</table>
</form>
</body>

<script>
var temp = document.getElementById('name');
var temp2 = document.getElementById('address');
var temp3 = document.getElementById('phone');
var temp4 = document.getElementsByName("rdoGender");

function validate(){
if(temp.value == null || temp.value == "")
{
alert("Name cannot be empty!");
e.preventDefault();
}
else if(temp2.value.search("jalan") == -1)
{
alert("Address must contain 'jalan'!");
e.preventDefault();
}
else if(isNaN(temp3.value) || temp3.value=="")
{
alert("Phone must be filled by numeric!");
e.preventDefault();
}
else if(temp4[0].checked == false || temp4[1].checked == false)
{
alert("Gender must be selected!");
e.preventDefault();
}
}
</script>

</html>

berikut merupakan hasil tampilan yang muncul dari code diatas:

Kamis, 17 Maret 2016

Pertemuan 3 - HTML - Form

Pada pertemuan ini kita akan membahas mengenai pembuatan Form dengan menggunakan HTML.

Ada beberapa atribut yang dimiliki oleh HTML untuk pembuatan form:

Text boxes
Check boxes
Radio buttons
Combo boxes
List boxes
Submit Button
etc...

kerangka yang kita gunakan untuk membuat form adalah:

<form>

content

</form>

ada beberapa argumen yang berhubungan dengan perintah yang diberikan:

- action = "url"

mengarahkan ke mana data akan dikirim

- method = "get"

pengiriman data melalui url

- method = "post"

pengiriman data melalui sistem sehingga lebih aman

- target = "target"

menspesifikasikan lokasi url action dibuka pada browser

A Text field:

A multi-line text field:

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

A password field:

A checkbox:

Radio buttons:

male<br>

female

A menu or list:
<select name="select">
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="BLUE">blue</option>
</select>

A submit button:

A reset button:

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

A plain button:

Berikut merupakan contoh pembuatan sebuah code untuk form pendaftaran:

<html>
<head>
<title>latihan</title>
</head>

<body>
<h2>Registration Form:</h2>
<table>
<form method="post">
<tr>
<td><label> Name : </label> </td>
<td><input type="text" name="name"> </td>
</tr>
<tr>
<td> <label> Email : </label> </td>
<td> <input type="text" name="email"> </td>
</tr>
<tr>
<td> <label> Password : </label> </td>
<td> <input type="password" name="pass"> </td>
</tr>
<tr>
<td> <label> Gender : </label> </td>
<td> <input type="radio" name="gender" value="m">Male
<input type="radio" name="gender" value="f">Female </td>

</tr>
<tr>
<td> <label> Country : </label> </td>
<td> <select name="select">
<option value="Indonesia">Indonesia</option>
<option value="Malaysia">Malaysia</option>
<option value="Singapore">Singapore</option>
</select> </td>
</tr>
<tr>
<td> <label> Address : </label> </td>
<td> <textarea name="address" rows="3"> </textarea> </td>
</tr>
<tr>
<td> <input type="submit" name="Submit" value="Submit"> </td>
</tr>
</form>
</table>
</body>

</html>

Hasilnya:

Rabu, 09 Maret 2016

Pertemuan 2 - HTML - Web Design Fundamental 1

Pertemuan ini membahas mengenai HTML. Apa sih HTML itu? HTML adalah singkatan untuk HyperText Markup Languange. HTML merupakan salah satu bahasa pemograman yang umum digunakan dalam merancang tampilan dalam web.

HTML memiliki tag atau keyword khusus dalam penggunaannya. Tag tersebut akan dibuka dengan tanda kurang dari "<" lalu ditutu dengan tanda lebih dari ">".

Ada 2 macam tag pada HTML
a. penggunaan normal:
- opening tag <p>
- closing tag </p>
b. single tag
- <p />

ada beberapa software yang dapat digunakan untuk melakukan coding HTML
- Notepad
-NetBeans
- Dreamweaver
- dll...

Dalam HTML ada yang disebut Style Sheet. Style Sheet merupakan halaman khusus yang mengatur beberapa atribut dalam HTML seperti font, colour, margin, and allignment. Style Sheet bisa juga kita ambil dari luar (tidak dibuat sendiri) yang disebut sebagai external style sheet.

Minggu, 28 Februari 2016

Petemuan 1 - Introduction to Web Programming with Java

Pada kesempatan ini saya akan membuat rangkuman dari perkuliahan yang telah diberikan oleh dosen saya.

Materi yang saya rangkum dalam pertemuan ini adalah :

- An Introduction to Web Applications

- An Introduction to Java Web Programming
- An Introduction to Java Web Development
- Design Pattern

An Introduction to Web Applications

Apa itu Web Applications?

Web applications memiliki pengertian sebagai sekumpulan halaman web yang dihasilkan untuk menanggapi permintaan dari pengguna.

Ada beberapa tipe Web Applications:

- Search Engines

- Online Stores

- Auctions

- News Site

- Games

Komponen apa saja yang dimiliki dalam Web Applications?

- Client Computer

- Internet Computer

- Server Computer

Web Pages terdiri dari 2 jenis:

- Static

- Dynamic

Perbedaan diantara keduanya terdapat pada content atau isi dari halaman web tersebut. Dalam Static web pages contentnya tidak berubah atau dengan kata lain halaman yang telah dibuat sudah tidak diupdate lagi. Tetapi dalam Dynamic web pages, content didalamnya terus mengalami perubahan mengukuti perkembangan yang ada. Kebanyakan web pages yang ada pada masa sekarang ini telah menggunakan Dynamic web pages.

An Introduction to Java Web Programming

Komponen apa saya yang terdapat didalam Java Web Programming?

- Server harus menjalankan aplikasi web server

- Untuk menjalankan aplikasi java, server juga harus menjalankan software yang disebut Servlet

- Software ini akan memungkinkan web server untuk menjalankan Servlets dan JSPs

Apa itu Servlet?

Servlet merupakan sebuah class controller pada java yang menerima request dari class java, web client, atau servlet lainnya untuk memanggil request.

Servlet bisa juga dikatakan sebagai program yang berjalan dalam sebuah web sebagai penengah antara request dengan database

Apa itu JSP?

JSP merupakan sebuah teknologi berbasis web Bahasa pemograman java yang digunakan untuk menciptakan tampilan web yang dinamis. Kebanyakan dari isi JSP merupakan text HTML yang digabungkan dengan beberapa tags dynamic content.

An Introduction to Java Web Development

Ada 3 jenis pengembangan untuk servlet dan JSP:

- Stand-Alone Development

Hanya terdapat sebuah perangkat sebagai client dan juga sebagai servernya

- Local Area Network Development

Antara client dan srver dihubungkan melalui sistem jaringan berbasis LAN

- Internet Development

Penghubung antara perangkat client dan server sedah berbasis jaringan internet

Berikut merupakan arsitektur dari java web applications:

Berikut beberapa program yang umumnya digunakan dalam Java Web Development:

- Eclipse

- NetBeans

Design Pattern

Design pattern adalah sebuah solusi terhadap masalah umum yang sering terjadi dalam pembuatan program yang memiliki pola tertentu.

Design pattern yang akan kita gunakan pada pertemuan kali ini adalah MVC.

Apa itu MVC?

MVC atau Model View Controller adalah sebuah metode pembuatan program yang memisahkan antara data(model), tampilan(view), dan pengolahan data(controller).

Berikut gambaran ilustrasi MVC sederhana: