Membuat Client server part 5

Membuat tampilan awal untuk menarik pelanggan

Baiklah pada kesempatan ini saya akan menjelaskan bagaimana cara membuat sebuah tampilan layout untuk menarik pelanggan, untuk tampilan awalnya seperti dibawah ini:

Login.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

android:id="@+id/widg37"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical"

android:background="@drawable/c"

xmlns:android="http://schemas.android.com/apk/res/android">

   

<TableRow

android:id="@+id/widget45"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<TextView

android:id="@+id/widget47"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#FF000000"

android:text="Username       :    " />

<EditText

   android:id="@+id/txtusername"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:text=""

   android:textSize="18sp" />

</TableRow>

<TableRow

android:id="@+id/widget46"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<TextView

android:id="@+id/widget55"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="#FF000000"

android:text="Password       :    " />

<EditText

   android:id="@+id/txtpassword"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:password="True"

   android:text=""

   android:textSize="18sp" />

</TableRow>

 

<TableRow

   android:id="@+id/widget65"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:orientation="horizontal" >

<Button

   android:id="@+id/btnlogin"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:onClick="login"

   android:background="@drawable/b"

   android:text="LOGIN" />

</TableRow>

<TableRow

android:id="@+id/widget66"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<Button

   android:id="@+id/btndaftar"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:onClick="daftar"

   android:background="@drawable/b"

   android:text="DAFTAR" />

</TableRow>

<TableRow

android:id="@+id/widget67"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="horizontal">

<Button

   android:id="@+id/btninfo"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:onClick="daftar"

   android:background="@drawable/b"

   android:text="INFO" />

</TableRow>

<TextView

android:id="@+id/txtstatus"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="" />

</LinearLayout>

Tampilan yang ada diatas ini adalah tampilan from login dimana tampilan ini digunakan untuk mendaftar sebagai pelanggan. untuk melihat informasi tentang apa yang dijual di dalam aplikasi tersebut klik menu info, setelah itu aka nada gambar seperti di bawah ini :

Informasi.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:tools="http://schemas.android.com/tools"

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:paddingBottom="@dimen/activity_vertical_margin"

   android:paddingLeft="@dimen/activity_horizontal_margin"

   android:paddingRight="@dimen/activity_horizontal_margin"

   android:paddingTop="@dimen/activity_vertical_margin"

   android:background="@drawable/login"

   tools:context=".Informasi" >

   <Button

       android:id="@+id/kuliner"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

       android:layout_centerHorizontal="true"

       android:layout_centerVertical="true"

       android:background="@drawable/f"

       android:text="" />

</RelativeLayout>

Sebenarnya di menu informasi tersedia beberapa jenis rumah makan, untuk sementara saya baru menyediakan 1 tempat rumah makan. Untuk melihat jenis makanan dan minuman apa yang di jual di dalam aplikasi rumah makan, klik logo rumah makan. Setelah mengklik icon gambar anda akan pindah layout ke info jenis rumah makan.

Kuliner_lover.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:tools="http://schemas.android.com/tools"

   android:layout_width="match_parent"

   android:layout_height="match_parent"

   android:paddingBottom="@dimen/activity_vertical_margin"

   android:paddingLeft="@dimen/activity_horizontal_margin"

   android:paddingRight="@dimen/activity_horizontal_margin"

   android:paddingTop="@dimen/activity_vertical_margin"

   android:background="@drawable/kuliner"

   tools:context=".Kuliner_Lover" >

</RelativeLayout>

Ok baiklah tadi saya sudah menjelaskan tentang tampilan aplikasi untuk informasi jenis makanan dan minuman, semoga apa yang saya buat ini bisa bermanfaat bagi pembaca.

Read More ->>

Tugas UTS Framework

Nama : Edil M. Aras
Nim : 131315010
Kelas : A Semester 5
M.K : Pemr. Framework II

Laporan : Tugas UTS

Kemarin kami ditugaskan untuk membuat sebuah tampilan html berbentuk tabel didalam project netbeans. Berikut ini saya akan menjelaskan tentang cara - cara membuat project.

Langkah pertama yang saya lakukan adalah mendownload project maven di link https//:start.spring.io contohnya seperti dibawah ini :

Didalam project ini saya menggunakan spring boot versi 158 dan dependencies-nya saya menggunakan WEB, MYSQL, JPA, dan Thymeleaf. Nama project-nya saya berinama “Tugas_UTS” Untuk mendownload file tersebut klik generate project.

Setelah selesai mendownload sekarang kita open project yang kita download tadi kedalam netbeans

Setelah itu kita download m2 didalam project netbeans fungsi m2 sendiri adalah sebagai pendukung pembuatan project.

Setelah selesai mendownload m2 sekarang kita buat package entity, controller dan dao didalam source package

• Entity

Fungsi dari package entity adalah sebagai tempat untuk membuat sebuah tabel, dan attribute didalam database.

Fungsi dari @Entity adalah untuk membuat attribute

   @Id

   @GeneratedValue(generator = "uuid")

   @GenericGenerator(name = "uuid", strategy = "uuid2")

   private String id;

Setiap table pasti memiliki inputan id sebagai primary key, dan primary key tidak boleh ada yang sama. Untuk menghindari primary key yang sama ada baiknya kita gunakan ,coding yang ada diatas karena fungsi dari codingan diatas adalah untuk menghindari primary key yang sama. Intinya kita tidak perlu menginputkan id, karena id-nya akan terinput sendiri.

Fungsi get dan set adalah menyimpan data dan mengambil data

• Controller

Fungsi dari package controller adalah untuk membuat control dalam tampilan html baik manembah data, menghapus data, pemenggilan data, dan lain – lain.   

Dibawah ini adalah controller untuk table siswa :

@Controller

@RequestMapping("/siswa")

public class SiswaHtmlController {

   //load model tabel siswa

   @Autowired

   private SiswaDao pd;

   //menampilkan list siswa

   @RequestMapping("/tampilan")

   public void daftarSiswa(Model m) {

       m.addAttribute("daftarSiswa", pd.findAll());

   }

   //menghapus data siswa

   @RequestMapping("/hapus")

   public String hapus(@RequestParam("id") String id) {

       pd.delete(id);

       return "redirect:tampilan";

   }

   //Tambah Data Siswa

   @RequestMapping(value = "/tambah", method = RequestMethod.POST)

   public String prosesTambah(@Valid Siswa s, BindingResult errors) {

       if (errors.hasErrors()) {

           return "/siswa/tambah";

       }

       pd.save(s);

       return "redirect:tampilan";

   }

   //Tambah Data Siswa

   @RequestMapping(value = "/tambah", method = RequestMethod.GET)

   public String tampilkanTambah(@RequestParam(value = "id", required = false) String id, Model m) {

       //defaultnya isi dengan object baru

       m.addAttribute("siswa", new Siswa());

       if (id != null && !id.isEmpty()) {

           Siswa s = pd.findOne(id);

           if (s != null) {

               m.addAttribute("siswa", s);

           }

       }

       return "/siswa/tambah";

   }

}

• Dao

Data Access Object yang biasanya disebut DAO, merupakan pattern yang biasa digunakan oleh para developer ketika membuat aplikasi berbasis database. DAO biasanya digunakan oleh para developer untuk menerapkan “separation of concern” atau pemisahan kode program berdasarkan fungsinya, dan DAO itu sendiri berfungsi untuk memanipulasi data yang terdapat didalam database.

Siswadao.java

package edilaras.com.Tugas_UTS.dao;

import edilaras.com.Tugas_UTS.entity.Guru;

import org.springframework.data.repository.PagingAndSortingRepository;

/**

*

* @author Aras

*/

public interface GuruDao extends PagingAndSortingRepository<Guru, String>{

   

}

• Koneksi database

Setelah selesai membuat entity, controller, dan dao. Sekarang kita akan buat koneksi data basenya didalam folder other source. Contohnya dibawah ini :

Untuk membuat tampilannya kita buat file html didalam folder seperti di bawah ini :

Didalam folder saya membuat file tambah.html, dan tampilan,html

templates.siswa

• Tampilan.html

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

     xmlns:th="http://www.thymeleaf.org">

   <head>

       <title>Daftar Siswa</title>

       <meta charset="UTF-8" />

       <meta name="viewport" content="width=device-width, initial-scale=1.0" />

   </head>

   <body>

       <h1>Daftar Siswa</h1>

       <a href="#" th:href="@{/siswa/tambah}">Tambah Data Siswa</a>

       <table border="1">

           <thead>

               <tr>

                   <th>Nama</th>

                   <th>Jurusan</th>

                   <th>&nbsp;</th>

               </tr>

           </thead>

           <tbody>

               <tr th:each="p : ${daftarSiswa}">

                   <td th:text="${p.nama}"></td>

                   <td th:text="${p.jurusan}"></td>

                   <td>

                       

                       <a href="edit.html" th:href="@{/siswa/edit(id=${p.id})}">

                           Edit

                       </a>

                       <a href="#" th:href="@{/siswa/hapus(id=${p.id})}">

                           Hapus

                       </a> |

                   </td>

               </tr>

           </tbody>

       </table>

   </body>

</html>

• Tambah.html

<!DOCTYPE html>

<html>

   <head>

       <title>Tambah Daftar Siswa</title>

       <meta charset="UTF-8" />

       <meta name="viewport" content="width=device-width, initial-scale=1.0" />

   </head>

   <body>

       <h1>Tambah Data Siswa</h1>  

       <form action="#" th:action="@{/siswa/tambah}" th:object="${siswa}" method="post">

           <table border = "1">

               <tbody>  

                   <tr>    

                       <td>Nama</td>   

                       <td><input type="text" placeholder="Nama Lengkap" th:field="*{nama}" /></td>  

                       <td th:if="${#fields.hasErrors('nama')}" th:errors="*{nama}">Pesan Error</td>  

                   </tr>    

                   <tr>    

                       <td>Jurusan</td>   

                       <td><input type="text" placeholder="Jurusan Valid" th:field="*{jurusan}" /></td>  

                       <td th:if="${#fields.hasErrors('jurusan')}" th:errors="*{jurusan}">Pesan Error</td>  

                   </tr>    

                   

                   <tr>

                       <td colspan="3" align="right"><button type="submit">Simpan</button>

                       </td>

                   </tr>

               </tbody>

           </table>    

       </form>

   </body>

</html>

Baiklah tadi saya sudah menjelaskan sinkat cara saya membuat project ini semoga yang saya buat ini bisa bermanfaat buat pembaca.

Read More ->>

Membuat Inputan Id menjadi Auto Increment

“Membuat Inputan Id menjadi Auto Increment”

Pada minggu kemarin kami ditugaskan untuk membuat sebuah client server, client server yang saya buat yaitu aplikasi rumah makan, dimana aplikasi ini berfungsi sebagai penyedia rumah makan untuk pelanggan yang ingin memilih makanan yang mereka sukai.

Baiklah langsung saja saya akan menjelaskan bagaimana cara untuk membuat id tanpa perlu di inputkan diandroid.

  

 

Pada gambar diatas tidak tersediah tempat untuk penginputan id, tapi pada saat kita lihat dalam website id akan terinput sendiri berdasarkan urutan

Cara membuatnya hanya mudah hanya dengan membuka phpmyadmin di browser, dan jangna lupa mengaktifkan xampp

Cara membuatnya pilih table yang akan kita buat, kemudian pilih menu structur lalu klik change pada id

Setelah itu centang Auto_Increment lalu klik button save.

Selesai baiklah tadi saya sudah menjelaskan sedikit tentang cara membuat id terinput sendiri tanpa perlu di inputkan. Sekian dari saya semoga apa yang saya inputkan bisa bermanfaat buat pembaca.

Read More ->>