LAPORAN PRAKTIKUM
PEMOGRAMAN WEB
MODUL 6
Nama : Alfi Nur Rohmat
NIM : L200120074
Kelas : D
JURUSAN TEKNIK INFORMATIKA
FAKULTAS KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS MUHAMMADIYAH SURAKARTA
2014
A.
TUJUAN
Mengiplemasikan
web PHP dengan gabungan CSS untuk memperindah tampilan website.
B. PERCOBAAN
Langkah-langkah percobaan :
1.
Instal software Xampp ke komputer
2.
Jalankan software xampp. Pastikan MySQL dalam keadaan
aktif
3.
Buat folder baru di direktori localhost (secara default
di C:\\xampp\htdocs), beri nama folder tersebut dengan nim anda.
Percobaan 1
1.
Modifikasi script percobaan 1 modul 4 dengan menambahkan
css dibagian bawah tag body. Berikut script lengkapnya
<html>
<head>
<title>Data
Mahasiswa</title>
</head>
<body
style="background-image:url(background.jpg)">
<?php
//koneksi
ke database
$koneksi=mysql_connect('localhost',
'root', '');
//host,
user, password
$db=mysql_select_db('mahasiswa');
// nama database
?>
<style
type="text/css">
table {
border:
1px solid #000000;
}
th {
background-color:
#ff69ba;
color : #FFFFFF;
}
tr:hover{
background-color:
#ffc0cb;
}
</style>
<table
width="600" cellpadding="3" cellspacing="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="text"
name="txtnim"
size="25"></td>
</tr>
<tr>
<td
width="500">Nama</td>
<td
width="600"><input type="text"
name="txtnama"
size="45"></td>
</tr>
<tr>
<td
width="500">Jenis kelamin</td>
<td
width="600"><input name="radiokelamin"
type="radio"
value="Laki-laki" />
Laki-laki
<input
name="radiokelamin" type="radio"
value="Perempuan"
/>
Perempuan
</td>
</tr>
<tr>
<td
width="500">Alamat </td>
<td
width="600">
<textarea
name="txtalamat" rows="5"
cols="45"></textarea>
</td>
</tr>
<tr>
<td>Jurusan</td>
<td><input
type="text" name="txtjurusan"
size="45"></td>
</tr>
<tr>
<td
width="500"></td>
<td
width="600">
<input
id="submit" type="submit" name="simpan"
value="Simpan">
<input
id="submit" value="Batal" type="reset">
</td>
</tr>
</form>
</table>
<?php
//simpan
data ke database
if (isset($_POST['simpan'])){
$nim =
$_POST['txtnim'];
$nama =
$_POST['txtnama'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat =
$_POST['txtalamat'];
$jurusan =
$_POST['txtjurusan'];
// query
input
$input="insert
into mhs (nim, nama, jeniskelamin,
alamat,
jurusan) values ('$nim', '$nama',
'$jeniskelamin',
'$alamat', '$jurusan')";
//kondisi
inputan
if($simpan&&$nim==''){
echo
"</br> NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){
echo
"</br> Nama tidak boleh kosong, diisi dulu";
}elseif($alamat==''){
echo
"</br> Alamat tidak boleh kosong, diisi dulu";
}elseif($jurusan==''){
echo
"</br> Jurusan tidak boleh kosong, diisi dulu";
}else{
mysql_query($input);
echo'</br>Data
berhasil dimasukkan';
}}
?>
<hr>
<H2
align="center">Data Mahasiswa</H2>
<?php
//buat
warna tabel
$warna1 = "#fffaf0";
$warna2 = "#CCFFFF";
$warna = $warna1;
//menampilkan
data
$sql =
mysql_query("SELECT * FROM mhs ORDER BY nim");
if(!$sql)
die("Query
Salah");
echo
"<table cellpadding=4 align=center><t>
<th>No</th>
<th>Nim</th>
<th>Nama</th>
<th>Jenis
Kelamin</th>
<th>Alamat</th>
<th>Jurusan</th>
</tr>";
$no=+1;
while
($baris = mysql_fetch_row($sql)) {
$nim = $baris[0];
$nama = $baris[1];
$jeniskelamin = $baris[2];
$alamat = $baris[3];
$jurusan = $baris[4];
if($warna
== $warna1){
$warna ==
$warna2;
}
else {
$warna =
$warna1;
}
echo
"<tr bgcolor=$warna>
<td
align=center>$no</td>
<td
align='center'>$nim</td>
<td
align=center>$nama</td>
<td
align=center>$jeniskelamin</td>
<td
align=center>$alamat</td>
<td
align=center>$jurusan</td>
</tr>";
$no++;
}
echo
"</table>";
?>
</body>
</html>
2.
Simpan dengan nama form.php pada folder yang sudah di
buat sebelumnya.
3.
Buka file menggunakan browser dengan mengetikan alamat
http:/localhost/NIManda/form.php pada kolom alamat.
4.
Lihat dan isikan data yang diperlukan
C.
TUGAS
1.
Modifikasi hasil tugas modul 4 dengan menambahkan script
css yang berbeda dari percobaan 1 modul 6
<html>
<head>
<title>Data
Mahasiswa</title>
</head>
<body
style="background-image:url(background.jpg)">
<?php
//koneksi
ke database
$koneksi=mysql_connect('localhost',
'root', '');
//host,
user, password
$db=mysql_select_db('mahasiswa');
// nama database
?>
<style
type="text/css">
table {
border:
1px solid #000000;
}
th {
background-color:
#ff69ba;
color:
#FFFFFF;
}
td{
background-color: #66FFFF;
color: #000000;
}
tr:hover{
background-color:
#ffc0cb;
}
input {
background-color:
#e5e5e5;
}</style>
<table
width="600" cellpadding="3" cellspacing="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="text"
name="txtnim"
size="25"></td>
</tr>
<tr>
<td
width="500">Nama</td>
<td
width="600"><input type="text"
name="txtnama"
size="45"></td>
</tr>
<tr>
<td
width="500">Jenis kelamin</td>
<td
width="600"><input name="radiokelamin"
type="radio"
value="Laki-laki" />
Laki-laki
<input
name="radiokelamin" type="radio"
value="Perempuan"
/>
Perempuan
</td>
</tr>
<tr>
<td
width="500">Alamat </td>
<td
width="600">
<textarea
name="txtalamat" rows="5"
cols="45"></textarea>
</td>
</tr>
<tr>
<td>Jurusan</td>
<td><input
type="text" name="txtjurusan"
size="45"></td>
</tr>
<tr>
<td
width="500"></td>
<td
width="600">
<input
id="submit" type="submit" name="simpan"
value="Simpan">
<input
id="submit" value="Batal" type="reset">
</td>
</tr>
</form>
</table>
<?php
//simpan
data ke database
if (isset($_POST['simpan'])){
$nim =
$_POST['txtnim'];
$nama =
$_POST['txtnama'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat =
$_POST['txtalamat'];
$jurusan =
$_POST['txtjurusan'];
// query
input
$input="insert
into mhs (nim, nama, jeniskelamin,
alamat,
jurusan) values ('$nim', '$nama',
'$jeniskelamin',
'$alamat', '$jurusan')";
//kondisi
inputan
if($simpan&&$nim==''){
echo
"</br> NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){
echo
"</br> Nama tidak boleh kosong, diisi dulu";
}elseif($alamat==''){
echo
"</br> Alamat tidak boleh kosong, diisi dulu";
}elseif($jurusan==''){
echo
"</br> Jurusan tidak boleh kosong, diisi dulu";
}else{
mysql_query($input);
echo'</br>Data
berhasil dimasukkan';
}}
?>
<hr>
<H2
align="center">Data Mahasiswa</H2>
<?php
//buat
warna tabel
$warna1 = "#fffaf0";
$warna2 = "#CCFFFF";
$warna = $warna1;
//menampilkan
data
$sql =
mysql_query("SELECT * FROM mhs ORDER BY nim");
if(!$sql)
die("Query
Salah");
echo
"<table cellpadding=4 align=center><t>
<th>No</th>
<th>Nim</th>
<th>Nama</th>
<th>Jenis
Kelamin</th>
<th>Alamat</th>
<th>Jurusan</th>
</tr>";
$no=+1;
while
($baris = mysql_fetch_row($sql)) {
$nim = $baris[0];
$nama = $baris[1];
$jeniskelamin = $baris[2];
$alamat = $baris[3];
$jurusan = $baris[4];
if($warna
== $warna1){
$warna ==
$warna2;
}
else {
$warna =
$warna1;
}
echo
"<tr bgcolor=$warna>
<td
align=center>$no</td>
<td
align='center'>$nim</td>
<td
align=center>$nama</td>
<td
align=center>$jeniskelamin</td>
<td
align=center>$alamat</td>
<td
align=center>$jurusan</td>
</tr>";
$no++;
}
echo
"</table>";
?>
</body>
</html>
2.
Buatlah css baru untuk memodifikasi tabel input pada
percobaan 1 modul 6.
<html>
<head>
<title>Data
Mahasiswa</title>
</head>
<body >
<?php
//koneksi
ke database
$koneksi=mysql_connect('localhost',
'root', '');
//host,
user, password
$db=mysql_select_db('mahasiswa');
// nama database
?>
<style
type="text/css">
table tr
td {
font-size:
12pt;
padding:
0.5em;
vertical-align:
top;
border-width:
0px;
padding:
5px;
border:
1px solid ;
}
table th{
background:url("abcd.jpg");
}
table{
background-color:skyblue;
color:
#000000 ;
font-size:
12pt;
padding:
0.5em;
border-width:
2px;
border-style:
solid;
border-color:#969BA5;
}
tr:
</style>
<table
width="600" cellpadding="3" cellspacing="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="text"
name="txtnim"
size="25"></td>
</tr>
<tr>
<td
width="500">Nama</td>
<td
width="600"><input type="text"
name="txtnama"
size="45"></td>
</tr>
<tr>
<td
width="500">Jenis kelamin</td>
<td
width="600"><input name="radiokelamin"
type="radio"
value="Laki-laki" />
Laki-laki
<input
name="radiokelamin" type="radio"
value="Perempuan"
/>
Perempuan
</td>
</tr>
<tr>
<td
width="500">Alamat </td>
<td
width="600">
<textarea
name="txtalamat" rows="5"
cols="45"></textarea>
</td>
</tr>
<tr>
<td>Jurusan</td>
<td><input
type="text" name="txtjurusan"
size="45"></td>
</tr>
<tr>
<td
width="500"></td>
<td
width="600">
<input
id="submit" type="submit" name="simpan"
value="Simpan">
<input
id="submit" value="Batal" type="reset">
</td>
</tr>
</form>
</table>
<?php
//simpan
data ke database
if (isset($_POST['simpan'])){
$nim =
$_POST['txtnim'];
$nama =
$_POST['txtnama'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat =
$_POST['txtalamat'];
$jurusan =
$_POST['txtjurusan'];
// query
input
$input="insert
into mhs (nim, nama, jeniskelamin,
alamat,
jurusan) values ('$nim', '$nama',
'$jeniskelamin',
'$alamat', '$jurusan')";
//kondisi
inputan
if($simpan&&$nim==''){
echo
"</br> NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){
echo
"</br> Nama tidak boleh kosong, diisi dulu";
}elseif($alamat==''){
echo
"</br> Alamat tidak boleh kosong, diisi dulu";
}elseif($jurusan==''){
echo
"</br> Jurusan tidak boleh kosong, diisi dulu";
}else{
mysql_query($input);
echo'</br>Data
berhasil dimasukkan';
}}
?>
<hr>
<H2
align="center">Data Mahasiswa</H2>
<?php
//buat
warna tabel
$warna1 = "#fffaf0";
$warna2 = "#CCFFFF";
$warna = $warna1;
//menampilkan
data
$sql =
mysql_query("SELECT * FROM mhs ORDER BY nim");
if(!$sql)
die("Query
Salah");
echo
"<table cellpadding=4 align=center><t>
<th>No</th>
<th>Nim</th>
<th>Nama</th>
<th>Jenis
Kelamin</th>
<th>Alamat</th>
<th>Jurusan</th>
</tr>";
$no=+1;
while
($baris = mysql_fetch_row($sql)) {
$nim = $baris[0];
$nama = $baris[1];
$jeniskelamin = $baris[2];
$alamat = $baris[3];
$jurusan = $baris[4];
if($warna
== $warna1){
$warna ==
$warna2;
}
else {
$warna =
$warna1;
}
echo
"<tr bgcolor=$warna>
<td
align=center>$no</td>
<td
align='center'>$nim</td>
<td
align=center>$nama</td>
<td
align=center>$jeniskelamin</td>
<td
align=center>$alamat</td>
<td
align=center>$jurusan</td>
</tr>";
$no++;
}
echo
"</table>";
?>
</body>
</html>
3.
Silahkan download tamplate css dilink http://www.templatemo.com/page/1 silahkan modifikasi
template tersebut dan gabungkan dengan form input dan print screen
hasil percobaan 1 modul 6 lampirkan dalam laporan
Tidak ada komentar:
Posting Komentar