Membuat Halaman Utama Dan Form Pendaftaran Online

Pada tahap ini tutorial ini kita akan membuat sebuah halaman utama dan form pendaftaran online yang diperuntukan untuk aplikasi pendaftaran online kita nantinya, tutorial tahap ini kita tidak berhubungan dengan php, ataupun mysql, melainkan html. Bahasa kerennya adalah desain front-end, yup pada setiap pengembangan sebuah sistem atau aplikasi berbasis web ataupun desktop selalu diawali dengan desain front-end karena programmer tidak berhubungan langsung dengan desain, kecuali jika memang programmer tersebut memiliki skill desain.

Pembuatan halaman utama ini tidak hanya akan menghasilkan 1 halaman utama saja, malainkan ada beberapa halaman seperti formulir tambah anggota pada pendaftaran online, serta pemberitahuan untuk penghapusan dan lain sebagainya, meski sederhana bagian ini harus penulis sampaikan, sehingga jika anda telah sampai pada dunia kerja sudah tau, bahwa seorang programmer tidak melakukan desain untuk front-end (kecuali ada skill dan dibayar lebih :p).

Membuat Halaman Utama Pendaftaran Online

Silahkan siapkan teks editor apa saja yang membuat anda dapat nyaman melakukan koding, jika menggunakan server lokal atau localhost pastikan localhost sudah aktif terlebih dahulu dan seluruh file dibawah ini menjadi satu folder dengan nama template atau apa saja sesuai dengan keinginan anda, berikut ini masing-masing halaman untuk pendaftaran online.

Buatlah sebuah folder didalam folder htdocs localhost anda lalu berinama tutorial_pendaftaran online dan didalam folder tutorial_pendaftaran_online tersebut buat sebuah folder dengan nama template dan masukan instruksi dibawah ini seluruhnya didalam folder template tersebut.

Style.css

Yang pertama akan kita buat adalah sebuah file css atau cascading stylesheet untuk memberikan sedikit gaya atau style pada tampilan aplikasi yang akan dibuat, namun sebelumnya pastikan semua file menjadi satu folder.

Salin kode dibawah ini lalu simpan dengan nama file style.css

body {
    background-color: #fff;
}
.container {
    width: 900px;
    margin: 0 auto;
}
.header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
}
.content {
    margin-top: 20px;
    margin-bottom: 20px;
}
.notification {
    text-align: center;
}
/** button **/
.btn {
    text-decoration: none;
    color: #000;
    padding: 10px;
    border: 1px solid #ccc;
    cursor: pointer;

    background: rgb(241,241,241); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(232,232,232,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(241,241,241,1) 0%,rgba(232,232,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(241,241,241,1) 0%,rgba(232,232,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
}
/** table **/
.table {}
.table tr th,
.table tr td {}
.table thead {
    background: rgb(241,241,241); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(232,232,232,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(241,241,241,1) 0%,rgba(232,232,232,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(241,241,241,1) 0%,rgba(232,232,232,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
}
.table thead tr th {
    padding: 10px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.table thead tr th:last-child {
    border-right: 1px solid #ccc;
}
.table tbody tr:first-child td {
    border-top: 1px solid #eee;
}
.table tbody tr td {
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.table tbody tr td:last-child {
    border-right: 1px solid #ccc;
}
/** form **/
.table-form {
    padding: 0;
}
.table-form tr td {
    padding: 5px;
}
label {
    display: block;
}
.form {
    padding: 3px;
}Code language: CSS (css)

Kode diatas adalah semua style elemen yang akan buat tampilan aplikasi pendaftaran online menjadi sedikit lebih menarik.

Halaman Utama

Selanjutnya kita akan membuat sebuah halaman utama aplikasi sistem pendaftaran online. Caranya salin kode dibawah ini lalu simpan dengan nama file index.html

<!DOCTYPE html>
<html>
<head>
    <title>Pendaftaran Online</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Pendaftaran Online</h1>
        </div>
        <div class="main">
            <a href="" class="btn">Tambah</a>
            <div class="content">
                <table class="table" width="100%" cellpadding="0" cellspacing="0">
                    <thead>
                        <tr>
                            <th width="1%" align="left">No</th>
                            <th width="15%">Nama</th>
                            <th width="10%">Alamat</th>
                            <th width="10%">No. Hp</th>
                            <th width="10%">Email</th>
                            <th width="13%">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>No</td>
                            <td>Nama</td>
                            <td>Alamat</td>
                            <td align="center">No. Hp</td>
                            <td>Email</td>
                            <td align="center"><a href="">Lihat</a> | <a href="">Edit</a> | <a href="">Hapus</a></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>Code language: HTML, XML (xml)

Jika sudah silahkan buka browser anda untuk memastikan apakah file halaman tersebut dapat berjalan dengan benar atau tidak.

Halaman Tambah Dan Edit Anggota

Setelah halaman utama kita akan membuat sebuah halaman anggota tetapi dengan menggunakan halaman utama, maksudnya beberapa bagian dihalaman utama tetap digunakan pada bagian-bagian halaman lainnya, caranya salin seluruh kode yang ada di halaman utama, setelah itu tempel ke teks editor anda lalu cari class main atau lengkapnya adalah dibawah ini.

<div class="main"></div>Code language: HTML, XML (xml)

Hapus seluruh sintaks yang ada didalam div class main tersebut sampai kepenutupnya namun tidak dengan menghapus penutup div main tersebut, jika sudah dihapus salin kode dibawah ini dan tempel dibagian bawah div main yang baru saja di hapus lalu simpan dengan nama file tambah.html

<h3>Tambah Anggota / Edit</h3>
<div class="content">
    <table class="table-form" border="0" width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td width="20%"><label for="nama">Nama Lengkap</label></td>
            <td colspan="3"><input name="nama" id="nama" type="text" class="form"></td>
        </tr>
        <tr>
            <td><label for="tempat_lahir">Tempat Lahir</label></td>
            <td><input name="tempat_lahir" id="tempat_lahir" type="text" class="form"></td>
            <td><label>Tanggal Lahir</label></td>
            <td>
                <select name="tgl_lahir" class="form">
                    <option>xx</option>
                    <option>xx</option>
                    <option>xx</option>
                </select>
                <select name="bln_lahir" class="form">
                    <option>xx</option>
                    <option>xx</option>
                    <option>xx</option>
                </select>
                <select name="thn_lahir" class="form">
                    <option>xxxx</option>
                    <option>xxxx</option>
                    <option>xxxx</option>
                </select>
            </td>
        </tr>
        <tr>
            <td valign="top"><label for="alamat">Alamat</label></td>
            <td valign="top" colspan="2">
                <textarea name="alamat" id="alamat" class="form" cols="50" rows="8"></textarea>
            </td>
            <td valign="top">
                <div>
                    <label for="kota">Kota</label>
                    <input type="text" name="kota" id="kota" class="form">
                </div>
                <div>
                    <label for="negara">Negara</label>
                    <input type="text" name="negara" id="negara" class="form">
                </div>
                <div>
                    <label for="kode_pos">Kode Pos</label>
                    <input type="number" name="kode_pos" id="kode_pos" class="form">
                </div>
            </td>
        </tr>
        <tr>
            <td><label for="hp">No. HP</label></td>
            <td colspan="3"><input name="hp" id="hp" type="number" class="form"></td>
        </tr>
        <tr>
            <td><label for="email">Email</label></td>
            <td colspan="3"><input name="email" id="email" type="text" class="form"></td>
        </tr>
        <tr>
            <td><label for="tingg_badan">Tinggi Badan</label></td>
            <td colspan="3"><input name="tingg_badan" id="tingg_badan" type="number" class="form"></td>
        </tr>
        <tr>
            <td><label for="berat_badan">Berat Badan</label></td>
            <td colspan="3"><input name="berat_badan" id="berat_badan" type="number" class="form"></td>
        </tr>
    </table>
</div>
<input type="submit" class="btn" value="Simpan">Code language: HTML, XML (xml)

Halaman Detail Anggota

Cara membuat halaman detail anggota ini masih sama seperti membuat halaman tambah dan edit anggota, silahkan ikuti cara tersebut lalu lalu gunakan kode dibawah ini dan simpan dengan nama detail.html

<h3>Detail Anggota</h3>
<div class="content">
    <table class="table-form" border="0" width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td width="20%">Nama Lengkap</td>
            <td width="1%">:</td>
            <td>Bahasaweb.com</td>
        </tr>
        <tr>
            <td>Tempat/Tgl. Lahir</td>
            <td width="1%">:</td>
            <td>Tangerang, 03 Juni 1993</td>
        </tr>
        <tr>
            <td>Alamat</td>
            <td width="1%">:</td>
            <td>Jl. Raya Indonesia Indah, Tangerang, Indonesia 15213</td>
        </tr>
        <tr>
            <td>No. Hp</td>
            <td width="1%">:</td>
            <td>08595959595</td>
        </tr>
        <tr>
            <td>Email</td>
            <td width="1%">:</td>
            <td>admin@bahasaweb.com</td>
         </tr>
         <tr>
            <td>Tinggi Badan</td>
            <td width="1%">:</td>
            <td>171CM</td>
         </tr>
         <tr>
            <td>Berat Badan</td>
            <td width="1%">:</td>
            <td>65KG</td>
          </tr>
     </table>
</div>
<a href="" class="btn">Kembali</a>Code language: HTML, XML (xml)

Halaman Pemberitahuan

Nah ini adalah bagian halaman yang terakhir yang akan kita buat, caranya masih sama dengan cara diatas, salin kode dibawah ini dan ikuti cari pembuatan halaman anggota setelah itu simpan nama nama pemberitahuan.html

<div class="content">
    <div class="notification">
        <h3>Apakah anda yakin ingin menghapus anggota ini?</h3>
        <a href="" class="btn">Batal</a> <a href="" class="btn">Lanjutkan</a> 
    </div>
</div>Code language: HTML, XML (xml)

Jika semua file seudah dibuat maka akan menghasilkan sebuah struktur file seperti gambar dibawah ini.

Demikian cara pembuatan halaman utama dan form atau formulir pendaftaran online ini, untuk berikutnya yang akan kita bahas yaitu membuat koneksi mysql dengan php.