SWE-111-JSP-01-30.10

22
Pengenalan JSP Eko Budhi Suprasetiawan Email : [email protected] FB : http://facebook.com/ekobs MP : http://ekobs.multiply.com

Transcript of SWE-111-JSP-01-30.10

Page 1: SWE-111-JSP-01-30.10

Pengenalan JSPEko Budhi SuprasetiawanEmail : [email protected] : http://facebook.com/ekobs MP : http://ekobs.multiply.com

Page 2: SWE-111-JSP-01-30.10

History

30.10.2009 Eko Budhi S First cut

Contact UsPertanyaan bisa dikirimkan ke komunitas JavaGroup : [email protected] Homepage : http://groups.yahoo.com/group/jlinux

Page 3: SWE-111-JSP-01-30.10

Daftar IsiI Pengantar..................................................................................................................................5

A Objective............................................................................................................................5B Instalasi..............................................................................................................................5

B.1 Persiapan.....................................................................................................................5B.2 Download...................................................................................................................5B.3 File > Open Project....................................................................................................5B.4 Database.....................................................................................................................6B.5 common/db.jsp...........................................................................................................6B.6 Deploy........................................................................................................................6

C Tour....................................................................................................................................6II Catatan Developer...................................................................................................................9

A Apakah JSP ?.....................................................................................................................9B Software Architecture........................................................................................................9C Koneksi ke database...........................................................................................................9D Me­retrieve data...............................................................................................................10E List....................................................................................................................................10F Create................................................................................................................................11

F.1 insert­form.jsp...........................................................................................................11F.2 insert­process.jsp.......................................................................................................11

G Update..............................................................................................................................12G.1 update­form.jsp.........................................................................................................12G.2 update­process.jsp....................................................................................................13

H Delete...............................................................................................................................14H.1 delete.jsp...................................................................................................................14

I Google Map.......................................................................................................................14I.1 Retrieve data...............................................................................................................14I.2 Looping......................................................................................................................15

J Pros­Cons..........................................................................................................................15III Lab 1 : Salam Keadilan.......................................................................................................16

A Requirement.....................................................................................................................16B Software Architecture.......................................................................................................16C Praktikum.........................................................................................................................16

C.1 JSP............................................................................................................................16D Test...................................................................................................................................16

IV Lab 2 : Penguji Bilangan Prima...........................................................................................17A Requirement.....................................................................................................................17B Software Architecture.......................................................................................................17C Praktikum.........................................................................................................................17

C.1 form.jsp.....................................................................................................................17C.2 checker.jsp................................................................................................................18

D Test...................................................................................................................................18V Lab 3 : Financial Log............................................................................................................19

A Requirement.....................................................................................................................19B Software Architecture.......................................................................................................19C Praktikum.........................................................................................................................19

C.1 list.jsp........................................................................................................................19C.2 insert­form.jsp..........................................................................................................19

Page 4: SWE-111-JSP-01-30.10

C.3 insert­process.jsp......................................................................................................20C.4 update­form.jsp........................................................................................................20C.5 update­process.jsp....................................................................................................20C.6 delete.jsp...................................................................................................................20

D Test...................................................................................................................................21

Page 5: SWE-111-JSP-01-30.10

I  Pengantar

A  ObjectiveDalam lab ini, Anda akan bisa :

1. Memahami dasar pemrograman dengan Code Igniter2. Membaca parameter dari HTTP Request3. Melakukan koneksi ke database4. Melakukan proses Create­Retrieve­Update­Delete ke dalam datastore  5. Menggunakan data untuk Google Map

B  Instalasi

B.1  PersiapanAnda membutuhkan :

1. JDK 5 atau lebih baru

2. Glassfish atau Tomcat

3. mySQL

4. Netbeans IDE. Tutorial ini ditulis dengan Netbeans 6.7.1

B.2  DownloadUntuk   bisa   memulai   lab   menggunakan   JSP   ini   sebuah   aplikasi   contoh   sudah dikembangkan dan bisa di­download di :

http://sourceforge.net/projects/baduy/files/

Folder : Camp­111­JSP

File : baduy­lab­111­b01.zipURL  :

http://sourceforge.net/projects/baduy/files/Camp­111­JSP/baduy­lab­111­b01.zip/download 

Unzip ke dalam folder. Misal ke dalam folder

/home/ekobs/codefarm/

sehingga aplikasi contoh akan tersimpan dalam folder

Page 6: SWE-111-JSP-01-30.10

/home/ekobs/codefarm/baduy/

B.3  File > Open ProjectBukalah di dalam Netbeans IDE dengan menggunakan menu File > Open Project

B.4  DatabaseSiapkan database. Sebuah file sql tersedia di dalam folder sql. Jalankan misal melalui command line untuk menyiapkan database dan table yang dibutuhkan :

$ mysql ­uroot ­pibrahim < sql/kilimanjaro.sql

Sesuaikan user dan password dari database mySQL Anda.

B.5  common/db.jspSelanjutnya, edit file yang menyimpan konfigurasi database :

Folder : web/commonFile : db.jsp

Ubah bagian ini :

        String user = "root";        String password = "ibrahim";

sesuaikan dengan user dan password dari database mySQL Anda.

Page 7: SWE-111-JSP-01-30.10

B.6  Deploy

C  TourAnda bisa mencoba mencicipi aplikasi contoh.

Buka melalui browser Anda :

http://localhost:8080/baduy/index.jsp 

Sebuah peta  Google menampilkan  beberapa  marker  berdasarkan data  yang ada  di database.

Tekan link Manage untuk melihat data :

Tekan link New,  masukkan data lalu Submit.

Page 8: SWE-111-JSP-01-30.10

Bukalah kembali Map, data yang baru akan muncul :

Page 9: SWE-111-JSP-01-30.10

II  Catatan Developer

A  Apakah JSP ?JSP   adalah   salah   satu   teknologi   Java   yang   bisa   digunakan   untuk   pengembangan aplikasi Web.   Pendekatan yang digunakan dalam aplikasi Web berbasis JSP adalah Response­Request.   User   mengirimkan   HTTP   Request   melalui   browser   ke   server, selanjutnya JSP di server akan menggenerate HTTP Response.

B  Software ArchitectureJSP merupakan teknologi dasar di dalam Java, bisa digunakan sebagaimana adanya, maupun menjadi bagian dari framework, misalnya Spring MVC.

C  Koneksi ke databaseKoneksi   ke   database,   di   dalam   Java,   di­representasikan   sebagai   obyek java.sql.Connection.   Untuk   dapat   mendapatkan   instance   dari   obyek java.sql.Connection ini,  Driver yang sesuai harus  terlebih dahulu di­load ke dalam JVM.

Folder : web/common/File : database.jsp

<%@ page import="java.sql.*" %> 

<%!     static     {         try         {             Class.forName("com.mysql.jdbc.Driver");         }         catch(Exception e)         {             e.printStackTrace();         }     } %> 

<%!     public static Connection getConnection()             throws SQLException     {                 String   url     = 

Page 10: SWE-111-JSP-01-30.10

"jdbc:mysql://localhost:3306/KILIMANJARO_DB";         String user = "root";         String password = "ibrahim";                 return   DriverManager.getConnection(url,   user, password);     } 

%>

D  Me­retrieve dataDalam kode untuk me­retrieve data maupun berinteraksi dengan database, tidak ada kode yang khusus untuk mySQL.

Folder : web/contentFile : database.jsp

<%@include file="../common/db.jsp" %>

<%            Connection connection = getConnection();            String query = "select * from CONTENT_TBL";                        ResultSet   rs   = connection.createStatement().executeQuery(query);%>

E  ListUntuk menampilkan hasil Query di dalam JSP :

Folder : web/content/

File : list.jsp

<% 

    while(rs.next()) 

        { 

%> 

<tr> 

    <td><%= rs.getString("TITLE")%></td> 

    <td><%= rs.getString("LATITUDE")%></td> 

    <td><%= rs.getString("LONGITUDE")%></td> 

...

</tr> 

Page 11: SWE-111-JSP-01-30.10

<% 

         

        } 

%> 

F  CreateUntuk bisa memasukkan data ke database terdapat 2 buah JSP yang dibutuhkan yaitu insert­form.jsp dan insert­process.jsp

F.1  insert­form.jspFolder : web/content/File : insert­form.jsp

<form action="insert­process.jsp" method="post">    <table>        <tr>            <td>Title</td>            <td><input name="TITLE"></td>        </tr>        <tr>            <td>Latitude</td>            <td><input name="LATITUDE"></td>        </tr>        <tr>            <td>Longitude</td>            <td><input name="LONGITUDE"></td>        </tr>

    </table>

    <input type="submit">

</form>

F.2  insert­process.jspFolder : web/content/

File : insert­process.jsp

<%@include file="../common/db.jsp" %>

<%

Page 12: SWE-111-JSP-01-30.10

            Connection connection = getConnection();                       String sql = "insert into CONTENT_TBL(TITLE, LATITUDE, LONGITUDE) values (?,?,?)";                        PreparedStatement   prepStmt   = connection.prepareStatement(sql);

                        prepStmt.setString(1, request.getParameter("TITLE"));                        prepStmt.setDouble(2, Double.parseDouble(request.getParameter("LATITUDE")));                        prepStmt.setDouble(3, Double.parseDouble(request.getParameter("LONGITUDE")));

            prepStmt.executeUpdate();%>

Success ...

G  UpdateUntuk bisa melakukan update ke database, dibutuhkan 2 JSP yaitu update­form.jsp dan update­process.jsp

G.1  update­form.jspFolder : web/content/

File : update­form.jsp

<%@include file="../common/db.jsp" %>

<%            Connection connection = getConnection();             String sql = "select * from CONTENT_TBL where CONTENT_ID=?";                        PreparedStatement   prepStmt   = connection.prepareStatement(sql);

                        prepStmt.setLong(1, Long.parseLong(request.getParameter("CONTENT_ID")));

            ResultSet rs = prepStmt.executeQuery();            if(rs.next())                {                %>

<form action="update­process.jsp" method="post">        <input   type="hidden"   name="CONTENT_ID"   value="<%= rs.getLong("CONTENT_ID") %>">    <table>        <tr>            <td>Title</td>

Page 13: SWE-111-JSP-01-30.10

                        <td><input   name="TITLE"   value="<%= rs.getString("TITLE") %>"></td>        </tr>        <tr>            <td>Latitude</td>                        <td><input   name="LATITUDE"   value="<%= rs.getDouble("LATITUDE") %>"></td>        </tr>        <tr>            <td>Longitude</td>                        <td><input   name="LONGITUDE"   value="<%= rs.getDouble("LONGITUDE") %>"></td>        </tr>

    </table>

    <input type="submit">

</form>

                                <%                }%>

G.2  update­process.jspFolder : web/content/

File : update­process.jsp

<%@include file="../common/db.jsp" %>

<%            Connection connection = getConnection();            String sql = "update CONTENT_TBL set TITLE = ?, LATITUDE = ?, LONGITUDE = ? where CONTENT_ID = ?";                        PreparedStatement   prepStmt   = connection.prepareStatement(sql);

                        prepStmt.setString(1, request.getParameter("TITLE"));                        prepStmt.setDouble(2, Double.parseDouble(request.getParameter("LATITUDE")));                        prepStmt.setDouble(3, Double.parseDouble(request.getParameter("LONGITUDE")));                        prepStmt.setDouble(4, Long.parseLong(request.getParameter("CONTENT_ID")));

            prepStmt.executeUpdate();%>

Success ...

Page 14: SWE-111-JSP-01-30.10

H  Delete

H.1  delete.jspFolder : web/content/

File : delete.jsp

<%@include file="../common/db.jsp" %>

<%

            Connection connection = getConnection();

                       String sql = "delete from CONTENT_TBL where CONTENT_ID = ?";

                        PreparedStatement   prepStmt   = connection.prepareStatement(sql);

                        prepStmt.setDouble(1, Long.parseLong(request.getParameter("CONTENT_ID")));

            prepStmt.executeUpdate();

%>

Deleted …

I  Google MapUntuk  menampilkan  data   dalam  Google  Map  dilakukan  dengan  me­retrieve  data, kemudian membuat JavaScript dari data ini.

I.1  Retrieve dataFolder : webFile : index.jsp

Untuk membaca data dari database ...

<%            Connection connection = getConnection();            String query = "select * from CONTENT_TBL";                        ResultSet   rs   = connection.createStatement().executeQuery(query);%>

Page 15: SWE-111-JSP-01-30.10

I.2  LoopingUntuk menampilkan data tsb dalam Google Map, perhatikan potongan kode berikut :

                    var i = 0;            <%            while (rs.next()) {                %>                        map.addOverlay(createMarker(                                                new   GLatLng(<%= rs.getDouble("LATITUDE") %>, <%= rs.getDouble("LONGITUDE")%>)                        , i++                     , "<%= rs.getString("TITLE")%>"                ));

                            <%

            }            %>

J  Pros­ConsPros :

1. Simple

Cons :

1. Tidak MVC2. Reusability rendah

Page 16: SWE-111-JSP-01-30.10

III  Lab 1 : Salam Keadilan

A  RequirementDalam Lab 1, Anda mendapat tantangan untuk bisa menampilkan sebuah pesan ke Web dengan menggunakan JSP. Pesan yang akan tertulis di Web adalah :

Salam Keadilan !

B  Software Architecture

Sebuah file JSP, yaitu ehlo.jsp sudah cukup memenuhi requirement.

C  Praktikum

C.1  JSPTulislah ehlo.jsp …

Folder : webFile : ehlo.jsp

<%String msg = "Salam Keadilan !";%>

<%= msg %>

D  TestDeploy aplikasi, dan buka melalui browser :

http://localhost:8080/baduy/ehlo.jsp

Page 17: SWE-111-JSP-01-30.10

IV Lab 2 : Penguji Bilangan Prima

A  RequirementDalam Lab 2, Anda berlatih bagaimana membaca parameter yang dikirimkan melalui HTTP Request.  Parameter  berupa  sebuah bilangan.  Program JSP yang Anda  buat bertugas mengujinya, apakah merupakan bilangan prima ataukah bukan.

Form isian :

Setelah diuji, dilaporkan misalnya :

B  Software ArchitectureUntuk memenuhi requirement di atas, Anda membuat 2 buah file JSP. Satu file JSP akan menampilkan form isian,sedang   yang   satu   :   membaca   angka   yang   dikirimkan,   melakukan   pengujian   dan menampilkan laporan hasil pengujian.

C  Praktikum

C.1  form.jspTulis form.jsp …

Folder : web/checker/

File : form.jsp

<form action="checker.jsp">

X : <input name="X">

<input type="submit" value="Check !"/>

</form>

Page 18: SWE-111-JSP-01-30.10

C.2  checker.jspTulis checker.jsp …

Folder : web/checker/

File : checker.jsp

<%    int x = Integer.parseInt(request.getParameter("X"));    boolean isPrime = isPrime(x);

    if(isPrime)        {%>

Ya, bilangan prima !

<%        }    else        {%>Bukan bilangan prima ...<%        }%>

<%!

    private boolean isPrime(int x) {        boolean isPrime = true;        int i = 2;        while (i <= x/2 && isPrime) {            isPrime = (x % i > 0);            i++;        }

        return isPrime;    }%>

D  TestDeploy.

Buka, melalui browser Anda :

http://localhost:8080/baduy/checker/form.jsp

Page 19: SWE-111-JSP-01-30.10

V  Lab 3 : Financial Log

A  RequirementDalam   Lab   3,   Anda   mendapat   tantangan   untuk   bisa   menyediakan   fitur   Create­Retrieve­Update­Delete   ke   sebuah   table   yang  memuat   informasi   tentang  Financial Log.

B  Software ArchitectureTable untuk Financial Log dibuat dengan SQL sbb :

create table FINANCIAL_LOG_TBL(ID int auto_increment primary key, BY_WHO varchar(40), FOR_WHAT varchar(255), ON_WHEN date, AMMOUNT double); 

Untuk   memenuhi   requirement   Create­Retrieve­Update­Delete   di   atas,   Anda   perlu menulis potongan­potongan kode sbb :

• list.jsp untuk menampilkan data• insert­form.jsp dan insert­process.jsp untuk memasukkan data baru• update­form.jsp dan update­form.jsp untuk meng­update data• delete.jsp untuk menghapus

C  PraktikumBuatlah folder flog sejajar dengan folder content.

C.1  list.jspBuatlah script untuk menampilkan data dari table FINANCIAL_LOG_TBL tsb. Buka script content/list.jsp sebagai contoh.

Folder : web/flog/

File : list.jsp

C.2  insert­form.jspBuatlah script untuk menampilkan form isian sesuai dengan kolom­kolom di  table FINANCIAL_LOG_TBL. Buka script content/insert­form.jsp sebagai contoh.

Page 20: SWE-111-JSP-01-30.10

Folder : flog/

File : insert­form.jsp

C.3  insert­process.jspBuatlah script untuk meng­insert row baru ke FINANCIAL_LOG_TBL. Buka script content/insert­form.jsp sebagai contoh.

Folder : flog/

File : insert­process.jsp

C.4  update­form.jspBuatlah   script   untuk   membaca   sebuah   row   dari   table   FINANCIAL_LOG_TBL, menampilkannya dalam form  isian  untuk  bisa  diubah oleh  pengguna.  Buka  script content/update­form.jsp sebagai contoh.

Folder : flog/

File : update­form.jsp

C.5  update­process.jspBuatlah script  untuk melakukan update ke FINANCIAL_LOG_TBL menggunakan data­data yang di­submit  pengguna.  Buka script content/update­process.jsp sebagai contoh.

Folder : flog/

File : update­process.jsp

C.6  delete.jspBuatlah   script   untuk   melakukan   delete   dari   FINANCIAL_LOG_TBL   untuk   data sesuai masukan dari pengguna. Buka script content/delete.jsp sebagai contoh.

Folder : flog/

File : delete.jsp

Page 21: SWE-111-JSP-01-30.10

D  TestBuka menggunakan browser di

http://localhost:8080/baduy/flog/list.jsp

Page 22: SWE-111-JSP-01-30.10

MUSLIM INFOCOM FOUNDATIONAnda siap berbagi planet bumi dengan mereka ? Berbagi mimpi dengan mereka ?

Scholarship Library Training

MIF mempunyai target membantu pengembangan keahlian 5000 software developer yang mempunyai kemampuan untuk shodaqoh minimal Rp 2000 per hari. 

Kunjungi http://www.mif.or.id untuk menyalurkan shodaqoh melalui PayPal ! Untuk rekening MIF di Indonesia silahkan email ke [email protected]


bkd.kotawaringinbaratkab.go.idbkd.kotawaringinbaratkab.go.id/wp-content/uploads/2019/01/... · NOMOR : 810/ /BK.111/2019 TENTANG ... Surat pernyataan bersedia mengabdi pada instansi

bkd.kotawaringinbaratkab.go.idbkd.kotawaringinbaratkab.go.id/wp-content/uploads/2019/01/... · NOMOR : 810/ /BK.111/2019 TENTANG ... Surat pernyataan bersedia mengabdi pada instansi

JSP dengan Netbeans - Member of EEPIS

JSP dengan Netbeans - Member of EEPIS

Tutorial Jsp Dengan Netbeans Versi 6[Fatihware.web.Id]

Tutorial Jsp Dengan Netbeans Versi 6[Fatihware.web.Id]

Dasar - dasar jsp di netbeans

Dasar - dasar jsp di netbeans

ED PSAK 111

ED PSAK 111

JSP Presentation

JSP Presentation

Tugas - Redirect Dan Koneksi Database Dengan JSP - OktaRiveranda

Tugas - Redirect Dan Koneksi Database Dengan JSP - OktaRiveranda

JSP dan Database

JSP dan Database

Pertemuan 11 Aplikasi Web dengan Servlet dan JSP

Pertemuan 11 Aplikasi Web dengan Servlet dan JSP

pembuatan directory website wisata kuliner berbasis jsp

pembuatan directory website wisata kuliner berbasis jsp

KELOMPOK KERJA III UNIT LAYANAN PENGAOAAN 01 … · KELOMPOK KERJA III UNIT LAYANAN PENGAOAAN 01 LlNGKUNGAN KANTOR PUSAT SEKRETARIAT JENOERAL ... Nomor: PENG-11/POKJA.111/2014 Kelompok

KELOMPOK KERJA III UNIT LAYANAN PENGAOAAN 01 … · KELOMPOK KERJA III UNIT LAYANAN PENGAOAAN 01 LlNGKUNGAN KANTOR PUSAT SEKRETARIAT JENOERAL ... Nomor: PENG-11/POKJA.111/2014 Kelompok

I PANITIA SERTIFIKASI GURU RAYON 111 ...p4tkn.lppmp.uny.ac.id/sites/p4tkn.lppmp.uny.ac.id/files...NI WAYAN MUJI ARINI, S.SN Seni Tari SMK YAPPARINDO 111 UNY 4 PERTUNJUKAN.01 1111757000730

I PANITIA SERTIFIKASI GURU RAYON 111 ...p4tkn.lppmp.uny.ac.id/sites/p4tkn.lppmp.uny.ac.id/files...NI WAYAN MUJI ARINI, S.SN Seni Tari SMK YAPPARINDO 111 UNY 4 PERTUNJUKAN.01 1111757000730

Jurnal JSP

Jurnal JSP

Koneksi MySQL Dengan JSP Bagian 1

Koneksi MySQL Dengan JSP Bagian 1

Tutorial Jsp (Java Server Page) Bagian 1

Tutorial Jsp (Java Server Page) Bagian 1

KOMPLIT 111

KOMPLIT 111

Jsp Dengan Netbeans

Jsp Dengan Netbeans

Web mvc dengan java jsp seri 1

Web mvc dengan java jsp seri 1

Pertemuan 10 Pemrograman JSP Matakuliah: T0053/Web Programming Tahun: 2006 Versi: 2.

Pertemuan 10 Pemrograman JSP Matakuliah: T0053/Web Programming Tahun: 2006 Versi: 2.

Enzim1 111

Enzim1 111