Becak Berilmu: Modul 6

A. TUJUAN

Mengimplementasikan web PHP dengan gabungan CSS untuk memperindah tampilan website

B. LANDASAN TEORI

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.

CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

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. Contoh diperlukannya halaman web dinamis ketika ingin membuat halaman buku tamu, atau ingin membuat aplikasi-aplikasi database. Halaman Web dinamis juga mempermudah admin situs untuk merawat (maintenance) situs yang dimilikinya. Sebuah website yang interaktif dan dinamis, tentu membutuhkan penyimpanan data yang fleksibel dan cepat untuk diakses. Salah satu database untuk server adalah MySQL. Jenis database ini sangat popular dan digunakan pada banyak website di internet sebagai bank data.

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.

C. ALAT DAN BAHAN

Alat dan bahan yang digunakan untuk praktikum adalah :

1. PC (Personal Computer)

2. Sistem Operasi Windows

3. Browser (Mozila Firefox/Chrome)

4. Notepad

5. Server local XAMPP

6. Modul Praktikum Pemrograman Web

D. LANGKAH-LANGKAH PRAKTIKUM

Sebelum melakukan percobaan, ikuti langkah-langkah berikut;

1. Install software xampp

2. Buat folder di C:\htdocs\mahasiswa

3. Buat database dengan nama mahasiswa, table dengan nama mhs seperti modul 4 kemarin, atau bisa menggunakan data dari modul 4 kemarin

PERCOBAAN

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

<!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;
}
button {
background-color :#2B95EC;
}
</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">jenis kelamin</td>
<td><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"></.textarea></td>
</tr>
<tr>
<td width="500"> jurusan</td>
<td width="600"><input type="text" name="txtjurusan" required="required" 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'])){
$nama   = $_POST['txtnama'];
$nim   = $_POST['txtnim'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat   = $_POST['txtalamat'];
$jurusan  = $_POST['txtjurusan'];
$input="insert into mhs (nim, nama, jenis_kelamin, alamat, jurusan) values ('$nama', '$nim', '$jeniskelamin','$alamat','$jurusan')";
if($nim==''){
echo "<br>";
}else{
mysql_query($input);

echo'<br>Data berhasil dimasukan';

}

}
?>
<hr>
<h2 align="center">
 Data mahasiswa</h2>
<?php
$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>
  <th>Pilihan</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>
   <td align=center><a href='hapus.php?nim=$nim'>Hapus</a> |<a href='update.php?nama=$nama&nim=$nim&jeniskelamin=$jeniskelamin&alamat=$alamat&jurusan=$jurusan'> ubah</a></td></tr>
";
   
$no++;
}
echo"</table>
";
?>

</body>
</html>

Menyimpan file dengan nama form.php pada folder yang sudah dibuat sebelumnya

Membuka file dengan menggunakan browser
Hasilnya

Tugas 1

Memodifikasi hasil tugas modul 4 dengan menambahkan script css yang berbeda dari modul 1 percobaan 6
Script

<!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: #f7a302;
 color: #ffffff;
}
td{
 background-color: #fcdda1;
 color: #000000;
}
tr:hover{
background-color: #00ccff;
}
input {
background-color: #e5e5e5;
}

</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">Jenis Kelamin</td>
<td><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"></.textarea></td>
</tr>
<tr>
<td width="500"> jurusan</td>
<td width="600"><input type="text" name="txtjurusan" required="required" 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'])){
$nama   = $_POST['txtnama'];
$nim   = $_POST['txtnim'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat   = $_POST['txtalamat'];
$jurusan  = $_POST['txtjurusan'];

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

if($nim==''){
echo "<br>";

}else{

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

</body>
</html>

3. Hasil

C. Tugas 2

Membuat script baru untuk memodifikasi tabel input data percobaan 1 modul 6
Script

table#tablemodul th{
 background-color: #f7a302;
}
table#tablemodul1{ 
color: #000000 ;
font-size: 9pt;
padding: 0.5em;
border-width: 1px;
border-style: solid;
border-color:#969BA5;
border-collapse: collapse;
}

table#tablemodul1 tr td { 
padding: 0.5em;
vertical-align: top;
border-width: 0px;
padding: 5px;
border: 1px solid #ccc;
}

</style>

<table width="600" cellpadding="3" cellspasing="3" align="center" id="tablemodul">
<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">Jenis Kelamin</td>
<td><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"></.textarea></td>
</tr>
<tr>
<td width="500"> jurusan</td>
<td width="600"><input type="text" name="txtjurusan" required="required" 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'])){
$nama   = $_POST['txtnama'];
$nim   = $_POST['txtnim'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat   = $_POST['txtalamat'];
$jurusan  = $_POST['txtjurusan'];

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

if($nim==''){
echo "<br>";

}else{

mysql_query($input);
echo'<br>Data berhasil dimasukan';
}
}
?>
<hr>
<h2 align="center">
 Data mahasiswa</h2>
<?php
$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 id=tablemodul1>
<tr>
  
  <th>No</th>
  <th>Nim</th>
  <th>Nama</th>
  <th>Jenis Kelamin</th>
  <th>Alamat</th>
  <th>Jurusan</th>
  <th>Pilihan</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>
   <td align=center><a href='hapus.php?nim=$nim'>Hapus</a> |<a href='update.php?nama=$nama&nim=$nim&jeniskelamin=$jeniskelamin&alamat=$alamat&jurusan=$jurusan'> ubah</a></td></tr>
";
   
$no++;
}
echo"</table>
";
?>

</body>
</html>

3. Hasilnya

Becak Berilmu

Header Ads

Senin, 17 November 2014

Modul 6

Tidak ada komentar:

Posting Komentar

Blog Archive