Percobaan Form dengan HTML ,PHP dan CSS

FORM HTML DAN CSS

Tujuan :

-Mempelajari proses html dan css

Konsep Dasar :

HTML adalah, (HyperText Markup Language) sebuah bahasa standar yang digunakan oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. HTMLjuga dapat digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. 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 file. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.

Langkah Kerja

-Membuat HTML

<html>

<head>

</head>

<tr>

<td colspan=2><h2 align="center" style="color:#4D4D4D; font:bold 25px Candara, Cooper Black, Tahoma;"><marquee>WEBSITE SUSU SAPI</marquee>

<center><img style=" width: 950px;

height: 200px; "img src="HBD4.png"></td>

</tr>

<tr>

<tr>

<td align="center"><a href="">Depan</a></td>

<td align="center"><a href="">Produk</a></td>

<td align="center"><a href="">Kontak</a></td>

<td align="center"><a href="">Forum</a></td>

</tr>

</table>

</div>

</td>

</tr>

<tr>

<h1 style="color:white; font:bold 18px Candara, Arial, Tahoma;"> Ayo Minum Susu</h1>

<p style ="color:white;">Susu adalah sebuah cairan bergizi yang dihasilkan oleh kelenjar susu dari mamalia betina. Susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat. Susu binatang (biasanya sapi) juga diolah menjadi berbagai produk seperti mentega, yoghurt, es krim, keju, susu kental manis, susu bubuk dan lain-lainnya untuk konsumsi manusia. Semua orang di dunia ini membutuhkan susu untuk menopang kehidupannya. Baik dari bayi sampai orang yang sudah lanjut usia.</p>

<p style ="color:white;">Khasiat susu sapi ternyata banyak sekali. Susu yang banyak digemari anak-anak ini disebut juga darah putih bagi tubuh karena mengandung banyak viatmin dan berbagai macam asam amino yang baik bagi kesehatan tubuh. Dalam segelas susu terdapat antara lain:

<li>Potasium, yang menggerakkan pembuluh darah agar tetap stabil, menghindarkan Anda dari penyakit darah tinggi dan jantung.</li>

<li>Zat besi, mempertahankan kulit tetap bersinar.</li>

<li>Tyrosine, mendorong hormon kegembiraan dan membuat tidur lebih nyenyak.</li>

<li>Kalsium, menguatkan tulang.</li>

<li>Magnesium, menguatkan jantung dan sistem saraf sehingga tidak mudah lelah.</li>

<li>Yodium, meningkatkan kerja otak cepat.</li>

<li>Seng, menyembuhkan luka dengan cepat.</li>

<li>Vitamin B2, meningkatkan ketajaman penglihatan.</li>

</text>

</ul>

</p>

</div>

</td>

</form>

<ul>

<li><a href="" style="color:#4D4D4D;">Manfaat Produk</a></li>

<li><a href="" style="color:#4D4D4D;">Ayo Minum Susu</a></li>

<li><a href="" style="color:#4D4D4D;">Produk Olahan Susu</a></li>

</ul>

<p>Pilihan Produk</p>

<ul>

<li><a href="" style="color:#4D4D4D;">Susu Bubuk</a></li>

<li><a href="" style="color:#4D4D4D;">Permen Susu Murni</a></li>

<li><a href="" style="color:#4D4D4D;">Dodol Susu</a></li>

</ul>

<a href="" style="color:white;">Developed by Melvan</a>

<p><center><font face="MV Boli">melvanr24@gmail.com</br></p></font>

</td>

</tr>

</table>

</body>

</html>

-Tambah script css

-untuk Memasukkan css ini ke dalam html gunakan

-Lalu tambah kan php

<form action="proses.php" method="post">
<text style ="color:white" ;>
Nama Lengkap: <br />
<input name="nama" type="text" placeholder="melvan" ><br /> <br />

Email : <br />
<input name="email" type="text" placeholder="melvan@gmail.com" ><br /> <br />

Jenis Kelamin : <br />
<input type="Radio" name="gender" value="male" checked > male  
<input type="Radio" name="gender" value="female" checked > female <br /> <br />

Product yang disukai : <br />
<input type="checkbox" name="produk" value="susu"> Susu  
<input type="checkbox" name="produk1" value="permen susu"> Permen Susu  
<input type="checkbox" name="produk2" value="dodol susu"> Dodol Susu   <br /> <br />
Kantor Cabang :
<select name="kantor">
<option value="Select">-----SELECT-----</option>
<option value="Bandung">BANDUNG</option>
<option value="GARUT">GARUT</option>
<option value="WONOSOBO">WONOSOBO</option>
</select>
<br /> <br />

Komentar : <br />
<textarea cols="75" rows="6" name="komen" type="text" placeholder="komen" ></textarea><br /> <br />
<input type="submit" value="Kirim">  <input type="reset" value="Hapus"></text>
</form>

-format script form nya

-contoh script php

<?php
$nama = $_POST['nama'];
$email = $_POST['email'];
$gender =$_POST['gender'];
$komen = $_POST['komen'];
$kantor = $_POST['kantor'];

if (isset($_Post['male'])){
echo $_POST['MALE'];
}
else if (isset($_Post['female'])){
echo $_POST['FEMALE'];
}

if (isset($_Post['BANDUNG'])){
echo $_POST['BANDUNG'];
}
else if (isset($_Post['GARUT'])){
echo $_POST['GARUT'];
}
else if (isset($_Post['WONOSOBO'])){
echo $_POST['WONOSOBO'];
}
?>

-dan untuk memanggil isi dari php diatas gunakan

<form action="proses.html" method="post">
<div id="isi">
<h1 style="color:pink; font:bold 26px Candara, Arial, Tahoma;"><marquee>TERIMA KASIH</marquee></h1>
<h2 style="color:white ; font:bold 16px Candara, Arial , Tahoma;">
Nama Anda : <?php echo $nama; ?><br /> <br />
Email Anda : <?php echo $email; ?><br /> <br />
Gender Anda : <?php echo $gender; ?><br /> <br />
Anda Memilih Produk : <?php
if (isset($_POST['produk'])){
echo $_POST['produk'];
}
?>
<?php
if (isset($_POST['produk1'])){
echo $_POST['produk1'];
}
?>
<?php
if (isset($_POST['produk2'])){
echo $_POST['produk2'];
} ?>
<br /> <br />
Cabang : <?php echo $kantor; ?><br /> <br />
Komentar : <?php echo $komen; ?><br /> <br />
</h2>

</div>
</td>
</form>

-dan ini contoh dari projek yang dibuat dari script script diatas