Ra Share: Laporan Modul 6

MODUL 6

“MENGGABUNGKAN WEB PHP & CSS”

A. Tujuan

Dapat mengimplementasikan web PHP dengan gabungan CSS untuk memperindah tampilan website

B. Landasan Teori

PHP

PHP adalah bahasa pemrograman yang berfungsi untuk membuat website dinamis maupun aplikasi web. PHP dapat berintegrasi dengan database, file dan folder, sehingga membuat PHP bisa menampilkan konten yang dinamis dari sebuah website. PHP adalah bahasa scripting, bukan bahasa tag based seperti HTML. PHP termasuk bahasa yang cross-platform, yang artinya bisa berjalan pada sistem operasi yang berbeda-beda. Program PHP ditulis dalam file plain text dan mempunyai akhiran “.php”.PHP membutuhkan web server, yang bertugas untuk memproses file-file php dan mengirimkaan hasil pemrosesan untuk ditampilkan di browser client. Oleh karena itu, PHP termasuk server-side scriptin.

MySQL

MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (database management system) atau DBMS yang multithread, multi-user,dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

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 berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada 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 dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Penempatan CSS dalam HTML:

Inline Style
Internal Style
Import Style
Eksternal Style

C. Alat dan Bahan

Alat dan bahan yang digunakan dalam praktikum adalah:

PC (Personal Komputer) atau Laptop
Sistem Operasi Windows
Browser (Mozilla Firefox)
Notepad++
Web server local XAMPP
Microsoft Word

D. Langkah-langkah Percobaan

Sebelum melakukan percobaan, ikuti langkah-langkah berikut:

1. Menginstal paket XAMPP ke komputer

2. Menjalankan software XAMPP, memastikan MySQL dalam keadaan aktif

3. Membuat database (atau bisa menggunakan database pada modul 4)

Percobaan 1

1. Memodifikasi script percobaan 1 modul 4 dengan menambahkan CSS dibagian bawah tag body, berikut script lengkapnya.

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

<table align="center" border="1" cellpadding="3" cellspacing="3" style="width: 600px;">
<tr>
 <th colspan="2">Input Data Mahasiswa</th>
</tr>
<form action="form.php" enctype="multipart/form-data" method="post">
<tr>
 <td width="500">NIM</td>
 <td width="600"><input name="txtnim" size="25" type="text" /></td>
</tr>
<tr>
 <td width="500">Nama</td>
 <td width="600"><input name="txtnama" size="45" type="text" /></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 cols="45" name="txtalamat" rows="5"><textarea></td>
</tr>
<tr>
 <td>jurusan</td>
 <td><input name="txtjurusan" size="45" type="text" /></td>
</tr>
<tr>
 <td width="500"></td>
 <td width="600"><input id="submit" name="simpan" type="submit" value="simpan" />
     <input id="submit" type="reset" value="batal" /></td>
</tr>
</form>
</table>
NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){
 echo" Nama tidak boleh kosong, diisi dulu";
}elseif($jenis_kelamin==''){
 echo" Jenis Kelamin tidak boleh kosong, diisi dulu";
}elseif($alamat==''){
 echo" alamat tidak boleh kosong, diisi dulu";
}elseif($jurusan==''){
 echo" jurusan tidak boleh kosong, diisi dulu";
}else{
mysql_query($input);
 echo" Data Berhasil dimasukkan";
}
}
?>

<hr />
<h2 align="center">
Data Mahasiswa</h2>
<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];
   $jenis_kelamin   =$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">$jenis_kelamin</td>
    <td align="center">$alamat</td>
    <td align="center">$jurusan</td>
    <td align="center"><a href="https://www.blogger.com/edit.php?nim=$nim">Edit</a> | 
      <a href="https://www.blogger.com/hapus.php?nim=$nim">Hapus</a></td>
     </tr>
";
 $no++;
}
echo"</body></html>
";
?>

2. Menyimpan file dengan nama form.php di folder C:\xampp\htdocs\ppw.mod6

3. Membuka web browser mozilla firefox dan mengetik alamat

4. localhost/ppw.mod6/form. php pada kolom alamat.

5. Mengisi data dan menekan tombol simpan

6. Hasil

A. Tugas

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

Script

<html>
<head>
<title>TUGAS 2</title>
</head>
<body>

.button{background-color:#A52a2a;
 color   :#FFFFFF;
 }
.button:hover {background-color:#d2691e;}
</style>

<table align="center" cellpadding="3" cellspacing="3" style="width: 600px;">
<tr>
 <th colspan="2">input Data mahasiswa</th>
</tr>
<form action="formtugas1.php" enctype="multipart/form-data" method="post">
<tr>
 <td width="500">NIM</td>
 <td width="600">
 <input name="txtnim" required="" size="25" type="text" /></td>
</tr>
<tr>
 <td width="500">Nama</td>
 <td width="600">
 <input name="txtnama" required="" size="45" type="text" /></td>
</tr>
<tr>
 <td width="500">Jenis Kelamin</td>
 <td width="600">
 <input name="radiokelamin" required="" type="radio" value="Laki-Laki" />Laki-Laki
 <input name="radiokelamin" required="" type="radio" value="Perempuan" />Perempuan</td>
</tr>
<tr>
 <td width="500">Alamat</td>
 <td width="600">
 <textarea cols="45" name="txtalamat" required="" rows="5"><textarea></td>
</tr>
<tr>
 <td>jurusan</td>
 <td><input name="txtjurusan" required="" size="45" type="text" /></td>
</tr>
<tr>
 <td width="500"></td>
 <td width="600">
 <input class="button" name="simpan" type="submit" value="simpan" />
 <input class="button" type="reset" value="batal" /></td>
</tr>
</form>
</table>
Data Berhasil dimasukkan";
} 
?>

<hr />
<h2 align="center">
Data Mahasiswa</h2>
<tr>
   <th>No</th>
   <th>Nim</th>
   <th>Nama</th>
   <th>Jenis Kelamin</th>
   <th>Alamat</th>
   <th>jurusan</th>
   </tr>
";
  if($warna == $warna1) {
 $warna = $warna2;
  } else {
 $warna = $warna1; 
  } 
 $no=1;
  while($baris=mysql_fetch_row($sql)){
   $nim   =$baris[0];
   $nama   =$baris[1];
   $jenis_kelamin =$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">$jenis_kelamin</td>
    <td align="center">$alamat</td>
    <td align="center">$jurusan</td>
     </tr>
";
 $no++;
}
echo"</body></html></pre>
";
?>

Hasil

2. Membuat CSS baru untuk memodifikasi tabel input pada percobaan 1 modul 6.

Contoh Script

table#tablemodul tr td {

font-size: 9pt;

padding: 0.5em;

vertical-align: top;

border-width: 0px;

padding 5px;

border: 1px solid #CCC;

}

table#tablemodul th {

background:url(../images/header_table.gif);

}

table#tablemodul1 {

color: #FFF;

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;

}

Script

<html>
<head>
<title>TUGAS 2</title>
</head>
<body>

.button{background-color:#A52a2a;
 color   :#FFFFFF;
 }
.button:hover {background-color:#d2691e;}
</style>

Hasil

1. Silahkan mendownload templates CSS dilink berikut

http://www.templatemo.com/page/1, silahkan modifikasi template tersebut dan gabungkan dengan form input dan hasil view percobaan 1 modul 6.

Script

<html>

<title>Wall Shelf - Free CSS Template</title>
<link charset="utf-8" href="css/coda-slider.css" media="screen" rel="stylesheet" title="no title" type="text/css"></link>

<table align="center" border="2" cellpadding="3" cellspacing="3" style="width: 600px;">
<tr>
 <th colspan="2">Input Data Mahasiswa</th>
</tr>
<form action="formtugas3.php" enctype="multipart/form-data" method="post">
<tr>
 <td width="500">NIM</td>
 <td width="600"><input name="txtnim" size="25" type="text" /></td>
</tr>
<tr>
 <td width="500">Nama</td>
 <td width="600"><input name="txtnama" size="45" type="text" /></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 cols="45" name="txtalamat" rows="5"><textarea></td>
</tr>
<tr>
 <td>jurusan</td>
 <td><input name="txtjurusan" size="45" type="text" /></td>
</tr>
<tr>
 <td width="500"></td>
 <td width="600">
 <input id="submit" name="simpan" type="submit" value="simpan" />
 <input id="submit" type="reset" value="batal" /></td>
</tr>
</form>
</table>
</div>
</div>
<div id="content_wrapper">
        <div id="content">
         NIM tidak boleh kosong, diisi dulu";
}elseif($nama==''){
 echo" Nama tidak boleh kosong, diisi dulu";
}elseif($jenis_kelamin==''){
 echo" Jenis Kelamin tidak boleh kosong, diisi dulu";
}elseif($alamat==''){
 echo" alamat tidak boleh kosong, diisi dulu";
}elseif($jurusan==''){
 echo" jurusan tidak boleh kosong, diisi dulu";
}else{
mysql_query($input);
 echo"Data Berhasil dimasukkan";
}
}
?>
    <a href="https://www.blogger.com/null">Data Mahasiswa</a>        
            </div>

        </div>

  
  <div id="menu_wrapper">
            <div id="menu">
               <ul class="navigation"><table>
<li><th><a href="https://www.blogger.com/null">No<span class="ui_icon home"></span></a></th></li>
<li><th><a href="https://www.blogger.com/null">NIM<span class="ui_icon aboutus"></span></a></th></li>
<li><th><a href="https://www.blogger.com/null">Nama<span class="ui_icon services"></span></a></th></li>
<li><th><a href="https://www.blogger.com/null">Jenis Kelamin<span class="ui_icon contactus"></span></a></th></li>
<li><th><a href="https://www.blogger.com/null">alamat<span class="ui_icon contactus"></span></a></th></li>
<li><th><a href="https://www.blogger.com/null">jurusan<span class="ui_icon contactus"></span></a></th></li>
</table>
</ul>
</div>
<td align="center">$no</td>
    <td align="center">$nim</td>
    <td align="center">$nama</td>
    <td align="center">$jenis_kelamin</td>
    <td align="center">$alamat</td>
    <td align="center">$jurusan</td>
     </div>
</div>
</body></html></pre>
";
 $no++;
}
echo"";
?>

Hasil

Download File :

Klik Disini

Ra Share

Senin, 05 Januari 2015

Laporan Modul 6

Tidak ada komentar:

Posting Komentar

Labels

Blog Archive