Laporan PWL Modul 6

MENGGABUNGKAN WEB PHP DAN CSS

TUJUAN

Mengimplementasikan web PHP dengan gabungan CSS untuk memperindah tampilan website

LANDASAN TEORI

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) merupakan bahasa pemrograman server side programming yang berfungsi untuk membuat website bersifat dinamis. Halaman website dinamis memberikan kesempatan kepada user untuk dapat berinteraksi dengan memberikan kesempatan kepada user untuk dapat berinteraksi dengan halaman web tersebut

XAMPP adalah perangkat lunak bebas (free) yang mendukung banyak system operasi, merupakan kompilasi dari beberapa program. Berfungsi sebagai server yang berdiri sendiri (localhost), yang terdiri dari program Apache HTTP server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat system operasi apapun), Apache, MySQL, PHP, dan Perl.

ALAT DAN BAHAN

PC (Personal Computer)
Sistem Operasi Windows
Browser (Mozila Firefox/Chrome)
Notepad
Server local XAMPP
Modul Praktikum Pemrograman Web

LANGKAH-LANGKAH PRAKTIKUM

PERCOBAAN

Modifikasi script percobaan 1 modul 4 dengan menambah css dibagian bawah tag body. berikut script lengkap

<html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>

<?php
//koneksi ke database
$konekssi=mysql_connect('localhost','root','');
//host, user, pass
$db=mysql_select_db('mahasiswa');//nama database
?>

<table width="600" cellpadding="3" align="center" border="0">
<tr>
<th colspan="2">Input Data MMahasiswa</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 type="radio" name="radiokelamin" 
value="Laki-laki">Laki-laki
<input type="radio" name="radiokelamin" 
value="Perempuan">Perempuan</td>
</tr>
<tr>
<td width="500"> Alamat</td>
<td width="600"><textareaini name="txtalamat" rows="5" 
cols="45"></textareaini></td>
</tr>
<tr>
<td width="500"> jurusan</td>
<td width="600"><input type="text" name="txtjurusan" 
size="45"></td>
</tr>
<tr>
<td width="500"></td>
<td width="600"><input id="submit" type="submit" name="submit" 
value="simpan">
<input id="submit" type="reset" value="Batal"></td>
</tr>
</form>
</table>
<?php

if (isset ($_POST ['submit'])){
$nim   = $_POST['txtnama'];
$nama   = $_POST['txtnim'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat   = $_POST['txtalamat'];
$jurusan  = $_POST['txtjurusan'];

$input="insert into mhs (nim, nama, jenis_kelamin, alamat, jurusan) 
values ('$nim','$nama','$jeniskelamin','$alamat','$jurusan')";

if($nim==''){
echo "<br> NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){ 
echo "<br> nama tidak boleh kosong, diisi dulu";
}elseif($jeniskelamin==''){
echo "<br> jenis kelamin 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 dimasukan';
}
}
?>
<hr>
<h2 align="center">
 Data mahasiswa</h2>
<?php

//buat warna tebal
 $warna1= "#FFFFFF";
 $warna2= "#CCFFFF";
 $warna = $warna1;

$sql = mysql_query("SELECT * FROM mhs ORDER BY nim");
  if(!$sql)
  die ("Query salah");
  
  echo"<table cellpadding=4 border=1 align=center>
<tr>
  
  <th>No</th>
  <th>Nim</th>
  <th>Nama</th>
  <th>Jenis Kelamin</th>
  <th>Alamat</th>
  <th>Jurusan</th>";
  
$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>
   <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>
   <td align=center><a 
href=?proses=bltdet&&kddetail=$nim>Ubah</a> | <a 
href=?proses=bltubh&&kdubah=$nim>Hapus</a></td>
<tr>";

//<td align=center><a 
href='hapus.php?nim=$nim'>Hapus</a> |<a href='#'> 
ubah</a></td></tr>
";
   
$no++;
}
echo"</table>
";
?>

</body>
</html>

Simpan dengan nama form.php
hasilnya

TUGAS

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

<html>
<head>
<title>Data Mahasiswa</title>
</head>
<body>

<?php
//koneksi ke database
$konekssi=mysql_connect('localhost','root','');
//host, user, pass
$db=mysql_select_db('mahasiswa');//nama database
?>

<table width="600" cellpadding="3" align="center" border="1px">
<tr>
<th colspan="2">Input Data MMahasiswa</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 type="radio" name="radiokelamin" 
value="Laki-laki">Laki-laki
<input type="radio" name="radiokelamin" 
value="Perempuan">Perempuan</td>
</tr>
<tr>
<td width="500"> Alamat</td>
<td width="600"><textareaini name="txtalamat" rows="5" 
cols="45"></textareaini></td>
</tr>
<tr>
<td width="500"> jurusan</td>
<td width="600"><input type="text" name="txtjurusan" 
size="45"></td>
</tr>
<tr>
<td width="500"></td>
<td width="600"><input id="submit" type="submit" name="submit" 
value="simpan">
<input id="submit" type="reset" value="Batal"></td>
</tr>
</form>
</table>
<?php

if (isset ($_POST ['submit'])){
$nim   = $_POST['txtnama'];
$nama   = $_POST['txtnim'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat   = $_POST['txtalamat'];
$jurusan  = $_POST['txtjurusan'];

$input="insert into mhs (nim, nama, jenis_kelamin, alamat, jurusan) 
values ('$nim','$nama','$jeniskelamin','$alamat','$jurusan')";

mysql_query($input);
echo'<br>Data berhasil dimasukan';
}
}
?>
<hr>
<h2 align="center">
 Data mahasiswa</h2>
<?php

//buat warna tebal
 $warna1= "#FFFFFF";
 $warna2= "#CCFFFF";
 $warna = $warna1;

//<td align=center><a 
href='hapus.php?nim=$nim'>Hapus</a> |<a href='#'> 
ubah</a></td></tr>
";
   
$no++;
}
echo"</table>
";
?>

</body>
</html>

hasilnya

download tamplate css di link berikut http://www.templatemo.com/page/1 silahkan modifikasi tamplate tersebut dan gabungkan dengan form input dan hasil view percobaan 1 modul 6

Phantom-Wahyoe

Social Icons

Menu

Blog Archive

Senin, 10 November 2014

Laporan PWL Modul 6

Tidak ada komentar:

Posting Komentar

About Me