Membuat Sebuah Tampilan WEB

Hello guys...
Yang pertama saya akan berbagi tentang bagaimana membuat sebuah tampilan web dengan URL yang berbeda dan tampilan (lebih dari satu jsp) yang berbeda dan dengan background warna yang berbeda pula

Langkah-langkanya :
1. Buka dulu project, Klik File - Pilih Open Project - Klik Project kita - Open Project



















2. Lalu kita buat file jsp baru dengan cara Klik kanan folder jsp pada WEB-INF lalu Pilih New Klik JSP


3. Isi pada File Name untuk memberi nama pada halaman misalnya saya beri nama one lalu Klik Finish

4. Buka file jsp yang baru kita buat lalu ganti pada Title Page sesuai keinginan kita, misalnya saya tulis osyulfah, kemudian pilih warna background sesuai keinginan kta, misalnya saya pilih warna Darksalmon

5. Selanjutnya kita buat file jsp berikutnya, langkahnya sama seperti langkah nomer 2 , kemudian beri nama file sesuai keinginan kita, misalnya saya beri nama hello , one , two, setelah itu pilih warna baground yang berbeda-beda dari setiap halamannya

6. Setelah itu kita buka HelloJava.java


7. Kemudian kita buat nama URL yang akan ditampilkan sesuai dengan keinginan kita, misalnya saya buat nama URL nya adalah hello. Caranya dengan mengetik @RequestMapping(value="/hello")

8. Setelah itu membuat isi dari web view atau tampilan. Dengan membuat variable terlebih dahulu kemudian membuat isi dari variabel seperti :
String myMessage = "Ohayo Gozaimas jangan lupa tersenyum";
String tambahan    = " semangat";

9. Setelah itu kita buat setViewName, ini digunakan untuk memanggil file jsp atau untuk menampilkan View Web yang telah kita setting pada file jsp seperti Title Page, Background Color, dll.

10. Masukkan Objek atau variabel yang ingin ditampilkan dengan cara mengetikkan variabel misalnya seperti : mav.addObject ("message", myMessage + tambahan); 

11. Untuk membuat halaman lain kita tinggal meng-copy script pertama kemudian kita paste sesuai jumlah halaman yang ingin kita buat, misalnya :
@RequestMapping(value = "/hello) 
public ModelAndView hello () {
       String myMessage = "Ohayo Gozaimas jangan lupa tersenyum" ;
       String tambahan = " semangat";
       ModelAndView mav = new ModelAndView() ;
       mav.setViewName ("hello");
       mav.addObject ("message", myMessage + tambahan") ;
       return mav ;
}


12. Disini saya membuat 3 tampilan web , maka saya meng-copy paste script sebanyak 3kali dan mengubah isi yang akan ditampilkan pada web setViewName sesuai dengan tampilan atau sesuai dengan nama file jsp yang akan ditampilkan, misalnya :

belajar :
@RequestMapping(value = "/belajar) 
public ModelAndView belajar () {
       String myMessage = "Ganbatte untuk hari ini esok dan seterusnya" ;
       String tambahan = " pantang menyerah";
       ModelAndView mav = new ModelAndView() ;
       mav.setViewName ("one");
       mav.addObject ("message", myMessage + tambahan") ;
       return mav ;
}

sychan :
@RequestMapping(value = "/sychan) 
public ModelAndView sychan () {
       String myMessage = "Semangat untuk mengerjakan tugas okey" ;
       String tambahan = " jangan putus asa";
       ModelAndView mav = new ModelAndView() ;
       mav.setViewName ("two");
       mav.addObject ("message", myMessage + tambahan") ;
       return mav ;
}


13. Setelah itu kita Deploy dengan cara Klik kanan pada SpringWeb lalu Klik Deploy

14. Setelah proses Deploy selesai langkah selanjutnya yaitu Run caranya sama seperti Deploy, Klik kanan pada SpringWeb lalu Klik Run maka secara otomatis akan membuka Mozilla Firefox

15. Jika berhasil maka hasil tampilannya seperti berikut :

hello 


belajar



sychan


Yang kedua saya akan berbagi tentang bagaimana membuat tamilan web dengan banyak controllernya tetapi masih satu view (hanya satu file jsp) dan dengan isi yang berbeda tapi warna backgrounnta sama

Langkah-langkahnya :

1. Buka dulu project, Klik File - Pilih Open Project - Klik Project kita - Open Project



2.  Lalu kita buat file jsp baru dengan cara Klik kanan folder jsp pada WEB-INF lalu Pilih New Klik JSP

3. Isi pada File Name untuk memberi nama pada halaman misalnya saya beri nama hello lalu Klik Finish

4. Buka file jsp yang baru kita buat lalu ganti pada Title Page sesuai keinginan kita, misalnya saya tulis osyulfah, kemudian pilih warna background sesuai keinginan kta, misalnya saya pilih warna Darksalmon

5. Masuk ke HelloJava, kemudian kita buat nama URL yang akan ditampilkan sesuai dengan keinginan kita, misalnya saya buat nama URL nya adalah hello. Caranya dengan mengetik @RequestMapping(value="/hello")


6. Copy Paste script berikut, untuk membuat halaman lain. Disini saya membuat hello, belajar, sychan

@RequestMapping(value = "/hello) 
public ModelAndView hello () {
       String myMessage = "Ohayo Gozaimas jangan lupa tersenyum" ;
       String tambahan = " semangat";
       ModelAndView mav = new ModelAndView() ;
       mav.setViewName ("hello");
       mav.addObject ("message", myMessage + tambahan") ;
       return mav ;
}

@RequestMapping(value = "/belajar) 
public ModelAndView belajar () {
       String myMessage = "Ganbatte untuk hari ini esok dan seterusnya" ;
       String tambahan = " pantang menyerah";
       ModelAndView mav = new ModelAndView() ;
       mav.setViewName ("hello");
       mav.addObject ("message", myMessage + tambahan") ;
       return mav ;
}

@RequestMapping(value = "/sychan) 
public ModelAndView sychan () {
       String myMessage = "Semangat untuk mengerjakan tugas okey" ;
       String tambahan = " jangan putus asa";
       ModelAndView mav = new ModelAndView() ;
       mav.setViewName ("hello");
       mav.addObject ("message", myMessage + tambahan") ;
       return mav ;
}


7. Ganti semua mav.setViewName sesuai nama jsp yang dibuat (hanya satu JSP). Disini saya membuat file jsp nya dengan nama hello. pastikan semuanya tertulis nama hello

8. Setelah itu kita Deploy dengan cara Klik kanan pada SpringWeb lalu Klik Deploy

9. Setelah proses Deploy selesai langkah selanjutnya yaitu Run caranya sama seperti Deploy, Klik kanan pada SpringWeb lalu Klik Run maka secara otomatis akan membuka Mozilla Firefox

10. Jika berhasil maka hasil tampilannya seperti berikut :

hello

belajar

sychan

Finally, Alhamdulillah selesai sudah membuat tampilan web sederhana untuk pemula, jika ada kesalahan mohon maaf, jika hasilnya eror jangan putus asa, semoga bermanfaat :)

Komentar

Postingan populer dari blog ini

Membuat Grafik/Objek Sederhana Menggunakan Java Netbeans

Membuat Kubus 3D dengan Java Neatbeans

Membuat Animasi Dengan Java Netbeans