Rabu, 05 September 2018

Membuat FORM BIODATA

Author:  |   |  No Comments | 

                        Assalamu'alaikum Wr.Wb

                            
A.Pendauluan
  Hay, apa kabar semuanya.. ketemu lagi nih sama saya. Kali ini saya akan membagikan tutorial tentang Membuat Form Biodata dengan html dan css.
Sebelum kita membuat formnya apa itu HTML dan CSS?. 
B.Latar Belakang
  Mampu mengetahui dan mengerti tentang tatacara membuat Form Biodata.
C.Maksud dan Tujuan
  Bisa membuat fom Biodata.
D.Alat dan Bahan
  -Laptop
  -Sublime Text
  -Browser
E.Pembahasan
Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.  Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.
F.Tahap Pelaksanaan
1.Buatlah script seperti dibawah ini:
<html>
 <head>
  <title>Input Biodata</title>
  <style type='text/css' >
  #button1 {
  padding-left:20px;
  text-align:left;
  }
  #button2 {
  padding-right:20px;
  text-align:right;
  }
  #kepala {
  font-family:algerian,snap itc;
  font-size:25px;
  height:50px;
  }
  #kaki {
  height:30px;
  }
  #tabel1 {
  background-color:dodgerblue;
  width:410;
  padding:10px;
  box-shadow:black 0px 0px 4px 1px;
  border-radius:20px 20px 20px 20px;
  }
  #tabel2 {
  background-color:dodgerblue;
  padding:10px;
  box-shadow:black 0px 0px 4px 1px;
  border-radius:20px 0px 20px 0px;
  }
  #tabel1_isi {
  background-color:black;
  color:white;
  width:400; height:200;
  padding:5px;
  }
  </style>
  <body bgcolor='cornflowerblue'>
   <br/>
    <form action='index.jsp' method='get'>
   <table id='tabel1' align='center' border='0' >
    <tr id='kepala'>
     <th colspan='2' id='kepala'>BIODATA SISWA</th>
    </tr>
    <tr>
     <td colspan='2'>
        <table align='center' id='tabel1_isi' border='0'>
            <tr>
            <td id='kolom1'>NIS :</td>
            <td><input type='text' name='nis' size='10' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Nama :</td>
            <td><input type='text' name='nama' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Alamat :</td>
            <td><input type='text' name='alamat' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>No. Telp :</td>
            <td><input type='text' name='no_telp' size='hobi0' required></td>
            </tr>
            <tr>
            <td id='kolom1'>Hobi :</td>
            <td><input type='text' name='hobi' size='hobi0' required></td>
            </tr>
        </table>
     </td>
    </tr>
    <tr id='kaki'>
     <td id='button1'>
     <input type='submit' value='proses'/>
     </td>
     <td id='buttonhobi'>
     <input type='reset' value='clear'/>
     </td>
    </tr>
    </div>
   </table>
  
   <br/>
  
   <table id='tabel2' align='center'>
    <%
    String nis = request.getParameter("nis");
    String nama = request.getParameter("nama");
    String alamat = request.getParameter("alamat");
    String no_telp = request.getParameter("no_telp");
    String hobi = request.getParameter("hobi");
    %>
    <tr bgcolor='black' style='color:white'>
     <th width='30'>No</th>
     <th width='50'>Nis</th>
     <th width='150'>Nama</th>
     <th width='200'>Alamat</th>
     <th width='120'>No. Telp</th>
     <th width='100'>Hobi</th>
    </tr>
    <tr>
     <td>1</td>
     <td><% out.println(nis); %></td>
     <td><% out.println(nama); %></td>
     <td><% out.println(alamat); %></td>
     <td><% out.println(no_telp); %></td>
     <td><% out.println(hobi); %></td>
    </form>
  </body>
</html>

2.Save hasil script tersebut dengan nama sesuai keingin anda, tetapi harus berekstensi .html 
3.Simpan pada folder  var/www/html :
4.Jalankan di browser. 
5.Jika berhasil Maka akan keluar tampilan seperti di bawah ini :                    
     


H.Penutup
  Sekian yang dapat saya sharing kan kurang lebihnya saya mohon ma'af semoga bermanfa'at untuk kita semua.. 
                         Wassalamu'alaikum wr.wb

,

0 comments:

Posting Komentar

Popular Posts

Recent Posts

About Me

Foto saya
Assalamu'alaikum wr.wb Hay perkenalkan nama saya Rizka Mala Alfiana my nick name is Rizka, I from in Jepara. Sekian dan Terimakasih. Wassalamu'alaikum wr.wb

Formulir Kontak

Nama

Email *

Pesan *

Pengikut

Recent

Comment