Sahabat Techno-Media pada kesempatan kali ini Tech-Me akan membahas tntang Percobaan Form dengan HTML dan CSS
Kita akan perkenalan dulu dengan CSS
- TUJUAN Memahami dan mengetahui fungsi dari CSS (Cascading Style Sheets) sebagai bahasa pemrograman guna mengatur desain dan layout web.
- ALAT DAN BAHAN
- LANGKAH - LANGKAH PERCOBAAN Sebelum memulai percobaan menggunakan CSS, ikuti petunjuk di bawah ini terlebih dahulu
1. Satu unit PC
2. Aplikasi Notepad++
3. Software web server local XAMPP
4. Web browser
5. Lembar kerja percobaan.
2. Aplikasi Notepad++
3. Software web server local XAMPP
4. Web browser
5. Lembar kerja percobaan.
2. Untuk menyimpan file dari Notepad ke bentuk .css, jangan lupa untuk menuliskan .css dalam kolom “File name”, dan mengganti type file menjadi “All Types”.
3. Untuk menyimpan file dari Notepad ke bentuk .html, jangan lupa untuk menuliskan .html dalam kolom “File name”, dan mengganti type file menjadi “All Types”. Percobaan pertama Langkah percobaan praktek pertama :
1. Buka aplikasi Notepad++ atau sejenisnya yang anda sukai.
2. Lalu Copy kan kode berikut kedalam Notepad++
<html>
<head>
<link href="css.css" rel="stylesheet" />
</head>
<body>
<table width="70%" align="center">
<?php include 'header.php'; ?>
<tr>
<td width="70%">
<div id="isi" class="button3">
<h1 style="color:blue:font:bold 16px Candara, arial, tahoma;">Ayo Minum Vitacripit!</h1>
<img src="fb-art.png">
<html>
<head>
<title>Buku Tamu</title>
</head>
<body>
<h1>Buku Tamu</h1>
<br />
Silahkan isi buku tamu di bawah ini untuk meninggalkan pesan Anda!<br /><br />
<form action="thanks.php" method="post">
Nama Lengkap* : <br />
<input name="nama" type="text" placeholder="Dhiemas Ganisha" required=""><br /><br />
Email* : <br />
<input name="email" type="text" placeholder="dhimasganisha@gmail.com" required=""><br /><br />
Jenis Kelamin* : <br />
<input type="radio" name="jk" value="Laki-Laki" required="">Laki-Laki</input>
<input type="radio" name="jk" value="Perempuan" required="">Perempuan</input> <br /><br />
Produk Yang Diinginkan* : <br />
<input type="checkbox" name="produk" value="Susu Sapi">Susu Sapi</input> <input type="checkbox" name="produk2" value="Susu Kambing">Susu Kambing</input><br /><br />
Kantor Cabang* :
<select name="cabang" >
<option>--PILIH--</option>
<option value="Bandung">Bandung</option>
<option value="Jakarta">Jakarta</option>
<option value="Surabaya">Surabaya</option>
</select><br /><br />
Pesan* : <br />
<textarea cols="70" rows="15" name="pesan" placeholder="pesan anda..." required=""></textarea><br /><br />
<b>INFO:</b> HARAP SEMUA KOLOM *(required) DI ISI!</br>
<input type="submit" name="kirim" value="Kirim"> <input type="reset" value="Hapus">
</form>
</body>
</html>
</div>
<?php include 'footer.php'; ?>
</td>
</tr>
<tr>
<td colspan="2" height="50" class="footer">
<p style="color:blue;font:bold 12px candara, arial, tahoma;text-align:center";>
Copyright by <a href="index.php">PT. VitaIndo</a>
</p>
</td>
</tr>
</table>
</body>
</html>
3. Save file tersebut dengan nama index.php <head>
<link href="css.css" rel="stylesheet" />
</head>
<body>
<table width="70%" align="center">
<?php include 'header.php'; ?>
<tr>
<td width="70%">
<div id="isi" class="button3">
<h1 style="color:blue:font:bold 16px Candara, arial, tahoma;">Ayo Minum Vitacripit!</h1>
<img src="fb-art.png">
<html>
<head>
<title>Buku Tamu</title>
</head>
<body>
<h1>Buku Tamu</h1>
<br />
Silahkan isi buku tamu di bawah ini untuk meninggalkan pesan Anda!<br /><br />
<form action="thanks.php" method="post">
Nama Lengkap* : <br />
<input name="nama" type="text" placeholder="Dhiemas Ganisha" required=""><br /><br />
Email* : <br />
<input name="email" type="text" placeholder="dhimasganisha@gmail.com" required=""><br /><br />
Jenis Kelamin* : <br />
<input type="radio" name="jk" value="Laki-Laki" required="">Laki-Laki</input>
<input type="radio" name="jk" value="Perempuan" required="">Perempuan</input> <br /><br />
Produk Yang Diinginkan* : <br />
<input type="checkbox" name="produk" value="Susu Sapi">Susu Sapi</input> <input type="checkbox" name="produk2" value="Susu Kambing">Susu Kambing</input><br /><br />
Kantor Cabang* :
<select name="cabang" >
<option>--PILIH--</option>
<option value="Bandung">Bandung</option>
<option value="Jakarta">Jakarta</option>
<option value="Surabaya">Surabaya</option>
</select><br /><br />
Pesan* : <br />
<textarea cols="70" rows="15" name="pesan" placeholder="pesan anda..." required=""></textarea><br /><br />
<b>INFO:</b> HARAP SEMUA KOLOM *(required) DI ISI!</br>
<input type="submit" name="kirim" value="Kirim"> <input type="reset" value="Hapus">
</form>
</body>
</html>
</div>
<?php include 'footer.php'; ?>
</td>
</tr>
<tr>
<td colspan="2" height="50" class="footer">
<p style="color:blue;font:bold 12px candara, arial, tahoma;text-align:center";>
Copyright by <a href="index.php">PT. VitaIndo</a>
</p>
</td>
</tr>
</table>
</body>
</html>
4. Dan coba jalankan file tersebut.. pasti nanti bakal ada yang salah . Kenapa? di script tersebut saya memasukkan <?php include 'header.php'; ?> dan <?php include 'footer.php'; ?> yang artinya ada file header.php yang harus kita buat. Silahkan copas kode dibawah ini header.php
<tr>
<td colspan="2"><img src="gmbr.jpg"/></td>
</tr>
<tr>
<td colspan="2">
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a href="#">Depan</a></td>
<td align="center"><a href="#">Profil</a></td>
<td align="center"><a href="#">Produk</a></td>
<td align="center"><a href="index.php?p=" name="p">Buku Tamu</a></td>
<td align="center"><a href="#">Forum</a> </td>
</tr>
</table>
</div>
</td>
</tr>
<td colspan="2"><img src="gmbr.jpg"/></td>
</tr>
<tr>
<td colspan="2">
<div id="menu">
<table width="100%">
<tr>
<td align="center"><a href="#">Depan</a></td>
<td align="center"><a href="#">Profil</a></td>
<td align="center"><a href="#">Produk</a></td>
<td align="center"><a href="index.php?p=" name="p">Buku Tamu</a></td>
<td align="center"><a href="#">Forum</a> </td>
</tr>
</table>
</div>
</td>
</tr>
footer.php
<td width="30%" class="table-menu">
<br><br><br><br><br><br><br>
<center>
<h3>Kunjungi Kami</h3>
<a href="http://Facebook.com"><button class="button1"><b>Facebook</b></button></a>
<a href="http://twitter.com"><button class="button2"><b>Twitter</b></button></a>
<a href="http://lazada.co.id"><button class="button3"><b>Lazada</b></button></a>
</center>
</td>
<br><br><br><br><br><br><br>
<center>
<h3>Kunjungi Kami</h3>
<a href="http://Facebook.com"><button class="button1"><b>Facebook</b></button></a>
<a href="http://twitter.com"><button class="button2"><b>Twitter</b></button></a>
<a href="http://lazada.co.id"><button class="button3"><b>Lazada</b></button></a>
</center>
</td>
Hampir lupa. silahkan copy kode css berikut dan save menjadi css.css
<style type="text/css">
table{
border-collapse:collapse;
border:1px solid black;
}
#menu{
height:40px;
width:100%;
background:url(hitam.png) repeat-x;
}
#menu table{
border:none;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14 px Candara, Arial, Tahoma;
}
#isi{
padding: 10 10 10 10;
}
#isi p{
color:black;
font:11 px candara, arial, tahoma;
padding-bottom:5px;
}
#isi img{
border:1px solid black;
width:80px;
height:100px;
}
.table-menu{
vertical-align:top;
border-collapse:collapse;
border:1px solid black;
background-color:purple;
}
.footer{
background-color:#f95e5e;
}
.button1{
background-color:blue;
}
.button2{
background-color:blue;
}
.button3{
background-color:orange;
}
.button4{
background-color:black;
}
.post-body img {max-width:98% !important;
}
</style>
table{
border-collapse:collapse;
border:1px solid black;
}
#menu{
height:40px;
width:100%;
background:url(hitam.png) repeat-x;
}
#menu table{
border:none;
}
#menu td{
height:40px;
text-align:center;
vertical-align:middle;
color:#fff;
font: bold 14 px Candara, Arial, Tahoma;
}
#isi{
padding: 10 10 10 10;
}
#isi p{
color:black;
font:11 px candara, arial, tahoma;
padding-bottom:5px;
}
#isi img{
border:1px solid black;
width:80px;
height:100px;
}
.table-menu{
vertical-align:top;
border-collapse:collapse;
border:1px solid black;
background-color:purple;
}
.footer{
background-color:#f95e5e;
}
.button1{
background-color:blue;
}
.button2{
background-color:blue;
}
.button3{
background-color:orange;
}
.button4{
background-color:black;
}
.post-body img {max-width:98% !important;
}
</style>
Lalu silahkan anda save dengan yang sudah saya jelaskan di atas tersebut. dan Jalankan web dengan menggunakan XAMPP. Selanjutnya saya akan membahas Bagaimana caranya form berjalan dengan menggunakan PHP
KESIMPULAN
Sampai sini saya dapat simpulkan bahwa Membuat webiste untuk pemula bisa menggunakan Kode Tabel dan menggunakan PHP yang masih awal. dan pastikan kode dalam CSS dan HTML tersebut sesuai. jika di HTML lihat di <class="table-menu"> seperti itu.
Daftar Pustaka
DonnyHandoko Blog | Materi
Tutorial Belajar Blog | Kode Box for script
BACA JUGA -> HP Android RAM 2GB Termurah 2017
0 comments: