A PHP Error was encountered

Severity: 8192

Message: array_key_exists(): Using array_key_exists() on objects is deprecated. Use isset() or property_exists() instead

Filename: helpers/template_helper.php

Line Number: 1042

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/helpers/template_helper.php
Line: 1042
Function: _error_handler

File: /home/u8613374/public_html/dasar/templates/frontend/belajar/header.php
Line: 100
Function: head

File: /home/u8613374/public_html/dasar/dev/application/libraries/Site.php
Line: 69
Function: view

File: /home/u8613374/public_html/dasar/dev/application/helpers/template_helper.php
Line: 13
Function: view

File: /home/u8613374/public_html/dasar/templates/frontend/belajar/artikel.php
Line: 1
Function: get_template

File: /home/u8613374/public_html/dasar/dev/application/libraries/Site.php
Line: 69
Function: view

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 37
Function: view

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

A PHP Error was encountered

Severity: 8192

Message: array_key_exists(): Using array_key_exists() on objects is deprecated. Use isset() or property_exists() instead

Filename: helpers/template_helper.php

Line Number: 1049

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/helpers/template_helper.php
Line: 1049
Function: _error_handler

File: /home/u8613374/public_html/dasar/templates/frontend/belajar/header.php
Line: 100
Function: head

File: /home/u8613374/public_html/dasar/dev/application/libraries/Site.php
Line: 69
Function: view

File: /home/u8613374/public_html/dasar/dev/application/helpers/template_helper.php
Line: 13
Function: view

File: /home/u8613374/public_html/dasar/templates/frontend/belajar/artikel.php
Line: 1
Function: get_template

File: /home/u8613374/public_html/dasar/dev/application/libraries/Site.php
Line: 69
Function: view

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 37
Function: view

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

Rabu, 19-Januari-2022

A PHP Error was encountered

Severity: Warning

Message: ini_set(): A session is active. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 282

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/core/MY_Controller.php
Line: 12
Function: library

File: /home/u8613374/public_html/dasar/dev/application/core/frontend_controller.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_cookie_params(): Cannot change session cookie parameters when session is active

Filename: Session/Session.php

Line Number: 294

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/core/MY_Controller.php
Line: 12
Function: library

File: /home/u8613374/public_html/dasar/dev/application/core/frontend_controller.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): A session is active. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 304

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/core/MY_Controller.php
Line: 12
Function: library

File: /home/u8613374/public_html/dasar/dev/application/core/frontend_controller.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: ini_set(): A session is active. You cannot change the session module's ini settings at this time

Filename: Session/Session.php

Line Number: 375

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/core/MY_Controller.php
Line: 12
Function: library

File: /home/u8613374/public_html/dasar/dev/application/core/frontend_controller.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once

A PHP Error was encountered

Severity: Warning

Message: session_set_save_handler(): Cannot change save handler when session is active

Filename: Session/Session.php

Line Number: 110

Backtrace:

File: /home/u8613374/public_html/dasar/dev/application/core/MY_Controller.php
Line: 12
Function: library

File: /home/u8613374/public_html/dasar/dev/application/core/frontend_controller.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/dev/application/controllers/Artikel.php
Line: 7
Function: __construct

File: /home/u8613374/public_html/dasar/index.php
Line: 335
Function: require_once


Membuat Form HTML

0 BYAdmin

Apa itu form? Apa fungsinya? Form digunakan untuk input data/entri data. Form umumnya ditemui ketika Anda melakukan registrasi member, pemesanan pembelian, dan banyak lagi, disana biasanya terdapat formulir inputan yang lumrahnya menanyakan nama Anda, jenis kelamin, nomor handphone dan banyak lagi. Nah fasilitas-fasilitas dalam formulir tersebut sudah disediakan dalam html.

Di dalam html terdapat beberapa control form yg dapat digunakan, seperti control text box, list box, password box, text area box, radio button, check box, reset button, submit button, hidden field, file select. Untuk membuat form dalam html kita cukup menambahkan tag <form>...</form> diantara tag <body>...</body>, untuk lebih jelasnya lihat kode di bawah ini:

<html>
    <head>
        <title>web saya</title>
    </head>
     
    <body>
        <h3>Contoh Penggunaan Form</h3>
            <form>
                Control form yg digunakan
            </form>     
    </body>
    
</html>

Baiklah kita akan coba belajar mengenai control-control form yang ada dalam HTML

Control Text Box

Untuk membuat control text box dalam html kita cukup menambahkan tag <input/> yg disimpan di antara tag <form>...</form>. Contoh:


<html>
    <head>
        <title>web saya</title>
    </head>
     
    <body>
        <h3>Contoh Penggunaan Control Text Box</h3>

            <form>
                <label for="nama">Nama:</label> 
                <input type="text" size="20" name="nama" id="nama"/>
                <br/>

                <label for="alamat">Alamat:</label> 
                <input type="text" size="40" name="alamat" id="alamat"/>
            </form>  

    </body>
    
</html>

Hasilnya kurang lebih seperti ini nantinya ...

See the Pen Belajar Form - Control Text Book by Ilmuwebsite (@ilmuwebsite) on CodePen.

 

Apabila kita lihat, tampilan pada form belum rapi, agar tampilannya terlihat rapi maka kita harus menyimpan control form dalam tabel. Contohnya seperti ini:


<html>

<head>
    <title>web saya</title>
</head>

<body>
    <h3>Contoh Penggunaan Control Text Box</h3>

    <form>
        <table>
            <tr>
                <td><label for="nama">Nama</label></td>
                <td>: <input type="text" size="20" name="nama" /></td>
            </tr>
            <tr>
                <td><label for="alamat">Alamat</label></td>
                <td>: <input type="text" size="30" name="alamat" /></td>
            </tr>
        </table>
    </form>

</body>

</html>

 

Kedepannya kita akan belajar tanpa menggunakan table, yakni table less menggunakan CSS style.

See the Pen Control Text Box 2 by Ilmuwebsite (@ilmuwebsite) on CodePen.

Control Textarea

Untuk membuat text area anda cukup menambahkan tag <textarea> diantara tag form.


    <html>
     
    <head>
        <title>web saya</title>
    </head>
     
    <body>
        <h3>Contoh Penggunaan Control Textarea :</h3>
     
        <form>
            <label for="msg">Message</label><br/>
            <textarea name="msg" cols="20" rows="4"></textarea>
        </form>
     
    </body>
     
    </html>

See the Pen Control Textarea by Ilmuwebsite (@ilmuwebsite) on CodePen.

Control Listbox

Untuk membuat list box anda dapat menggungakan tag <select> untuk lebih jelasnya lihatlah kode di bawah ini


<html>
    <head>
        <title>web saya</title>
    </head>
      
    <body>
        <h3>Contoh Penggunaan Listbox</h3>
            <form>

                <label for="program">Program :</label>
                <select name="program" id="program">
                    <option value="">Pilih Program</option>
                    <option value="Web Arsitektur">Web Arsitektur</option>
                    <option value="Mastering CMS">Mastering CMS</option>
                    <option value="Print Design">Print Design</option>
                    <option value="Multimedia dan Animasi">Multimedia Animasi</option>
                </select>

            </form>     
    </body>
     
</html>


See the Pen Contoh List Box by Ilmuwebsite (@ilmuwebsite) on CodePen.

Control Radio Button

Anda dapat menggunakan tag <input> untuk membuat radio button, dengan type ="radio". Contoh:


<html>
    <head>
        <title>web saya</title>
    </head>
       
    <body>
        <h3>Contoh Penggunaan Radio Button</h3>
            <form>
                <input type="radio" name="jkl" id="pria" value="Pria" />
                <label for="pria">Pria</label>
                <input type="radio" name="jkl" id="wanita" value="Wanita" />
                <label for="wanita">Wanita</label>
            </form>     
    </body>
      
</html>

See the Pen Contoh Radiobutton by Ilmuwebsite (@ilmuwebsite) on CodePen.

Control Check Box

Untuk membuat check box sama seperti membuat radio button, hanya atribut type pada tag input diganti menjadi checkbox, untuk lebih jelasnya lihat kode di bawah ini


<html>
    <head>
        <title>web saya</title>
    </head>
        
    <body>
        <h3>Contoh Penggunaan Checkbox</h3>
            <form>
                <p>Hoby :</p>
                
                <input type="checkbox" name="hoby[]" id="bacabuku" value="Baca Buku"/>
                <label for="bacabuku">Baca Buku</label>
                
                <input type="checkbox" name="hoby[]" id="olahraga" value="Olah Raga"/>
                <label for="olahraga">Olah Raga</label>
                
                <input type="checkbox" name="hoby[]" id="maingame" value="Main Game"/>
                <label for="maingame">Main Game</label>

                <input type="checkbox" name="hoby[]" id="hiking" value="hiking"/>
                <label for="hiking">Hiking</label>
            </form>   
    </body>
       
</html>

See the Pen Contoh Checkbox by Ilmuwebsite (@ilmuwebsite) on CodePen.

Control Password Box, Submit dan Reset Button

Baiklah untuk sementara ini adalah sesi terakhir dari pengenalan control form-form yang ada dalam html, sebetulnya masih banyak lagi control form yang lainnya, namun kita akan pelajari lagi nanti ketika akan memasuki dalam pembuatan aplikasi dinamis menggunakan PHP dan MYSQL

    <html>
        <head>
            <title>web saya</title>
        </head>
          
        <body>
            <h3>Contoh Penggunaan Control Password Box, Submit dan Reset Button : </h3>
     
                <form>
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password"/>
                    <br/><br/>
                    <input type="submit" name="submit" value="Submit"/>
                    <input type="reset" name="reset" value="Reset"/>
                </form>  
     
        </body>
         
    </html>

See the Pen Control Password Box, Submit dan Reset Button by Ilmuwebsite (@ilmuwebsite) on CodePen.

 

Kira-kira begitulah pembelajaran menggunakan control form dalam html. Kita akan masuk ke dalam latihan memnbuat form untuk inputan formulir biodata.

Latihan Membuat Form Input Biodata

Dalam membuat form input biodata pastinya sudah jelas item apa saja yang harus ada dalam formulirnya. Inputan yang akan disertakan dalam latihan ini adalah input box, textarea, checkbox, dan radio button, serta submit button

<html>

<head>
    <title>Form Input Biodata</title>
</head>

<body>
    <table border="1" bordercolor="red">
        <tr>
            <td>
                <center>
                    <h2>Form Input Biodata</h2>
                </center>
            </td>
        </tr>
        <tr>
            <td>
                <form name="fm-input">
                    <table>
                        <tr>
                            <td><label for="nama">Nama Lengkap</label></td>
                            <td>:</td>
                            <td><input type="text" size="20" name="nama" id="nama" /></td>
                        </tr>
                        <tr>
                            <td><label for="tll">Tempat, Tanggal Lahir</label></td>
                            <td>:</td>
                            <td>
                                <input type="text" size="20" name="nama" />,
                                <input type="text" size="2" name="tgl" />/
                                <input type="text" size="2" name="bln" />/
                                <input type="text" size="5" name="thn" />
                            </td>
                        </tr>
                        <tr>
                            <td><label for="alamat">Alamat</label></td>
                            <td>:</td>
                            <td><textarea name="alamat" id="alamat" cols="40" rows="3"></textarea></td>
                        </tr>
                        <tr>
                            <td><label for="telp">No. Telp/HP</label></td>
                            <td>:</td>
                            <td><input type="text" size="20" name="telp" id="telp" /></td>
                        </tr>
                        <tr>
                            <td><label for="jkl">Jenis Kelamin</label></td>
                            <td>:</td>
                            <td>
                                <input type="radio" name="jkl" value="Laki-Laki" id="laki" />
                                <label for="laki">LakiLaki</label>
                                <input type="radio" name="jkl" value="Perempuan" id="perempuan" />
                                <label for="perempuan">Perempuan</label>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="agama">Agama</label></td>
                            <td>:</td>
                            <td><input type="text" size="20" name="agama" id="agama" /></td>
                        </tr>
                        <tr>
                            <td><label for="hoby">Hoby</label></td>
                            <td>:</td>
                            <td>
                                <input type="checkbox" name="hoby[]" id="bacabuku" value="Baca Buku" />
                                <label for="bacabuku">Baca Buku</label>
                                <input type="checkbox" name="hoby[]" id="olahraga" value="Olah Raga" />
                                <label for="olahraga">Olah Raga</label>
                                <input type="checkbox" name="hoby[]" id="maingame" value="Main Game" />
                                <label for="maingame">Main Game</label>
                                <input type="checkbox" name="hoby[]" id="hiking" value="hiking" />
                                <label for="hiking">Hiking</label>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>
                                <input type="submit" name="submit" value="Submit" />
                                <input type="reset" name="reset" value="Clear!" />
                            </td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
    </table>
</body>

</html>

See the Pen Latihan Membuat Form Input Biodata by Ilmuwebsite (@ilmuwebsite) on CodePen.