Syalalalala: November 2014

TUJUAN
Mengimplementasi web PHP dengan gabungan CSS untuk memperinndah tampilan website

ALAT DAN BAHAN
1. PC
3. Browser Mozilla Firefox/Chrome
4. Notepad++
5. Web server local XAMPP /AppServ
6. Lembar kerja percobaan

LANGKAH PERCOBAAN
- install software xammp
- aktifkan mysql yang terdapat di dalam xampp

Percobaan 1 (Form data mahasiswa)
1. modifikasi script percobaan 1 modul 4 dengan menambahkan css dibagian bawah tag body.

<!DOCTYPE HTML>
<!DOCTYPE HTML>
<head>
<title>Data Mahasiswa</title>
</head><body>
<link rel="stylesheet" href="style.css">
<?php 
//koneksi ke database
$koneksi=mysql_connect ('localhost','root','');
$db=mysql_select_db('mahasiswa');
?>

th{
 background-color: #2B95EC;
 color: #ffffff;
}
tr:hover{
background-olor: #00ccff;
}
</style>

<table width="600" cellpadding="3" cellspasing="3" align="center" border="1">
<tr>
<th colspan="2">Input Data Mahasiswa</th></tr>
<form action="form.php" method="POST" enctype"multipart/form-data">
<tr>
<td width="500">NIM</td>
<td width="600"><input type="number" name="txtnim" required="required" size="25" ></td>
</tr>
<tr>
<td width="500"> nama</td>
<td width="600"><input type="text" name="txtnama" required="required" size="45"></td>
</tr>
<tr>
<td width="600"><input type="radio" name="radiokelamin" value="Laki-laki" required="required">Laki-laki
<input type="radio" name="radiokelamin" value="Perempuan" required="required">Perempuan</td>
</tr>
<tr>
<td width="500"> Alamat</td>
<td width="600"><textarea name="txtalamat" rows="5" required="required" cols="45">

2. simpan file dengan nama form.php pada folder yang sudah di buat
3. Buka browser lalu mengetikan localhost/nimmu/form.php
4. isikan data yg diperlukan kemudian Hasil

TUGAS

1. Modifikasi hasil tugas modul 4 dengan menambahkan script css yang berbeda dari percobaan 1 modul 6

untuk memodifikasi script diatas, bisa menambahkan style input, form sampai button, atau hanya dengan mengganti warnanya.
kali ini akan mencoba mengganti warnanya saja, biar lebih simple =)), ganti css yang ada pada percobaan 1 modul 6 dibawah ini

KEMUDIAN DIGANTI DENGAN

HASIL

2. Buatlah CSS baru untuk memodifikasi tabel input pada percobaan 1 modul 6. berikut CSS nya

yang perlu di perhatikan dari kode css diatas adalah table#tablemodul yang berarti di dalam form table ada sebuah elemenid yang bernama tablemodul. Untuk menerapkan css tersebut ke dalam percobaan 1, kita cukup mengganti kode table yang ada dalam percobaan.

ganti dengan menambahkan id

HASIL

Syalalalala

Selasa, 18 November 2014

MODUL 6