"Create" dan "Upload" di Golang Postgres: Front-end

Cek file-file v2
Repository/source code: https://github.com/JaisySymuri/postgre

Buat mana dulu, back-end atau front-end? Sebenarnya ini adalah perdebatan sepanjang masa layaknya ayam vs telur. Untuk lebih jelas anda bisa google sendiri. Namun sebagai pemula, saya rasa membuat front-end lebih dulu akan membuat hasil jadi aplikasi lebih mudah untuk dibayangkan.

Untuk membuat front-end, kita bisa langsung membuat html-nya atau menggunakan template. HTML lebih mudah dibuat karena didukung IDE, jadi ada auto-complete dan diberi indikator warna dan error. Template lebih susah dibuat karena setahu saya tidak ada dukungan apapun. Akan tetapi, template akan membuat aplikasi jadi lebih ringan, terutama jika aplikasi memiliki banyak css dan javascript, serta jika halaman-halaman aplikasi ada bagian yang sama.

Insert "Why not both?.jpg" here

Jadi, agar mudah saya akan membuat dengan html sampai front-end terlihat bagus. Kemudian baru di copy-paste di tmpl files. Saat aplikasi sudah jadi, semua html bisa kita hapus/pindahkan ke archieve karena sudah tidak terpakai lagi. Aplikasi jadi mudah dibuat dan ringan.

Oke, pertama buat folder baru untuk menampung SEMUA html files yaitu "html". Kemudian buat folder lagi untuk menampung SEMUA template files, yaitu 'form'.

Di folder html, buat 'new.html':

html/new.html


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Golang Postgres</title>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

  <script>

  </script>


</head>
<body>
<nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Golang Postgres</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="/">HOME</a></li>
        <li><a href="/new">NEW</a></li>
        <li><a href="/files">FILES</a></li>
        <li><a href="/search">SEARCH</a></li>
      </ul>
    </div>
  </nav>

  <h2>New Profile</h2>  
  <form method="POST" action="insert" enctype="multipart/form-data">
    <label> NIK </label><input type="text" name="NIK"   /><br />
    <label> Nama </label><input type="text" name="Nama"  /><br />
    <label> Username </label><input type="text" name="Username"  /><br />
    <label> Password </label><input type="password" name="Password"   /><br />
    <label> Alamat </label><input type="text" name="Alamat" /><br />
    <label> Tempat_Lahir </label><input type="text" name="Tempat_Lahir"   /><br />
    <label> Tanggal_Lahir </label><input type="date" name="Tanggal_Lahir"   /><br />
    <label> No_HP </label><input type="number" name="No_HP" /><br />
    <label> Pekerjaan </label><input type="text" name="Pekerjaan" /><br />
    <label> Gender </label><input type="text" name="Gender"  /><br />
    <label> Email </label><input type="text" name="Email"  /><br />
    <label> Nama_Ibu </label><input type="text" name="Nama_Ibu"  /><br />
     <label>The file :</label>
          <input type="file" name="file" required /><br />

          <label>Rename to :</label>
          <input type="text" name="alias" /><br />

    <input type="submit" value="Save user" />
  </form>

</body>
</html>

Penjelasan:

berisi alamat library dari CSS & JavaScript yang kita import. Jadi tinggal dipanggil saja nanti saat membuat .
Berisi menu bar. Jadi rencananya, di setiap halaman aplikasi kita akan memiliki menu bar ini. Isinya adalah:

Golang Postgres, logo aplikasi.

HOME, halaman utama aplikasi.

NEW, halaman untuk membuat profile user baru.

FILES, halaman untuk menampilkan file-file yang sudah diupload dan untuk mendownloadnya.

SEARCH, halaman untuk mencari user tertentu.

Buat judul halaman, 'New Profile'
Buat formulir berisi kolum-kolum yang sesuai dengan table yang kita buat sebelumnya. Isi formulir akan dikirim ke 'insert'. Untuk memudahkan, semua label kita pilih type-nya text, kecuali password, tanggal lahir, dan file.

Test

Untuk pengecekkan di VScode, kita gunakan ekstensi Live Server. Klik 'Go Live" di bagian bawah window VS code... voila!

Cantik sekali. Oke, sekarang kita buat templatenya. Di folder 'form' buat file baru 'Header.tmpl'. Disana kita definisikan template Header dengan cara menulis {{ define "Header" }} dan {{ end }}. Mereka adalah syntax yang menandakan awal dan akhir dari template. Kemudian copy-paste isi 'new.html' dari awal sampai akhir dari menu bar. Hasilnya, isi dari 'Header.tmpl' adalah seperti ini:

form/Header.tmpl

{{ define "Header" }}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Golang Postgres</title>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

  <script>

  </script>


</head>
<body>
<nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Golang Postgres/a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="/">HOME</a></li>
        <li><a href="/new">NEW</a></li>
        <li><a href="/files">FILES</a></li>
        <li><a href="/search">SEARCH</a></li>
      </ul>
    </div>
  </nav>

{{ end }}

Kemudian, kita buat footernya, 'Footer.tmpl'. Kita definisikan Footer dan isi dengan penutup body dan html:

form/Footer.tmpl

{{ define "Footer" }}

</body>
</html>

{{ end }}

Sangat singkat, karena memang hanya untuk penutup.

Buat file baru lagi, 'New.tmpl'. Kita definisikan template 'new', isi dengan memanggil template 'Header' dan 'Footer', caranya dengan mengetik {{ template "nama_template" }}. Diantara dua template tersebut, isi dengan copy-paste isi new.html dari '<h2>New Profile</h2>' sampai akhir dari '</form>'.

form/New.tmpl

{{ define "New" }}
  {{ template "Header" }}
   <h2>New Profile</h2>  
    <form method="POST" action="insert" enctype="multipart/form-data">
      <label> NIK </label><input type="text" name="NIK"   /><br />
      <label> Nama </label><input type="text" name="Nama"  /><br />
      <label> Username </label><input type="text" name="Username"  /><br />
      <label> Password </label><input type="password" name="Password"   /><br />
      <label> Alamat </label><input type="text" name="Alamat" /><br />
      <label> Tempat_Lahir </label><input type="text" name="Tempat_Lahir"   /><br />
      <label> Tanggal_Lahir </label><input type="date" name="Tanggal_Lahir"   /><br />
      <label> No_HP </label><input type="number" name="No_HP" /><br />
      <label> Pekerjaan </label><input type="text" name="Pekerjaan" /><br />
      <label> Gender </label><input type="text" name="Gender"  /><br />
      <label> Email </label><input type="text" name="Email"  /><br />
      <label> Nama_Ibu </label><input type="text" name="Nama_Ibu"  /><br />
       <label>The file :</label>
            <input type="file" name="file" required /><br />

            <label>Rename to :</label>
            <input type="text" name="alias" /><br />

      <input type="submit" value="Save user" />
    </form>
  {{ template "Footer" }}
{{ end }}

Repository/source code: https://github.com/JaisySymuri/postgre

Blog

"Create" dan "Upload" di Golang Postgres: Front-end

JaisySymuri

Insert "Why not both?.jpg" here

Test

Join Our Newsletter. No Spam, Only the good stuff.

Related