Selasa, 28 Oktober 2014

modul 5



MODUL 5
“CSS (Cascading Style Sheets)”
     A.   Tujuan
       Dapat memahami dan mengetahui fungsi dari CSS (Cascading Style Sheets) sebagai bahasa pemrograman guna mengatur desain danlayout web

B.   Landasan Teori
        Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
        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:
      1.      Inline Style
      2.      Internal Style
      3.      Import Style
      4.      Eksternal Style

     C.   Alat dan Bahan
      Alat dan bahan yang digunakan dalam praktikum adalah:
      1.      PC (Personal Komputer) atau Laptop
      2.      Sistem Operasi Windows
      3.      Browser (Mozilla Firefox)
      4.      Notepad++
      5.      Microsoft Word

     D.   Langkah-langkah Percobaan
      Percobaan 1: Border
      1.      Membuat folder baru dengan nama L200120106
      2.      Membuka Notepad++
      3.      Mengetik Script berikut :

                   
      4.      Menyimpan file dengan nama border.html
      5.      Membuka file menggunakan browser.
      6.      Hasil


      Percobaan 2 : Gambar
      1.      Membuka Notepad++
      2.      Mengetik Script berikut:

                       
      3.      Menyimpan file dengan nama gambar.html
      4.      Membuka file menggunakan browser.
      5.      Hasil


      Percobaan 3 : Bayangan
      1.      Membuka Notepad++
      2.      Mengetik Script berikut:

                       
      3.      Menyimpan file dengan nama bayangan.html
      4.      Membuka file menggunakan browser.
      5.      Hasil


      Percobaan 4 : Hyperlink
      1.      Membuka Notepad++
      2.      Mengetik Script berikut:

                       
      3.      Menyimpan file dengan nama hyperlink.html
      4.      Membuka file menggunakan browser.
      5.      Hasil
 

      Percobaan 5 : Form Menggunakan Ekternal Style
      1.      Membuka Notepad++
      2.      Mengetik Script berikut:

                       
      3.      Menyimpan file dengan nama style.css
      4.      Membuka Notepad++
      5.      Mengetik Script berikut:

                       
      6.      Menyimpan file dengan nama style.css
      7.      Membuka file menggunakan browser.
      8.      Hasil


     E.   Tugas
      1.      Membuat border form pada percobaan 5 menggunakan salah satu style border
             pada percobaan 1.
             Script

                       
             Hasil








Senin, 13 Oktober 2014

aplikasi web berbasis PHP dan database MySQL

MODUL 4
“ Aplikasi Web Berbasis PHP dan Database MySQL“

A.       TUJUAN
Mengimplementasikan bahasa pmrograman PHP dengan menggunakan database MySQL ke dalam sebuah aplikasi berbasis web.

B.        LANDASAN TEORI

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.

Database MySQL
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
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
1.           PC
2.           Sistem Operasi Windows 7
3.           Browser Mozilla Firefox/Chrome
4.           Notepad
5.           Web server lokal XAMPP/Appserv
6.           Lembar kerja percobaan

D.       LANGKAH-LANGKAH PRAKTIKUM
1.           Menginstal web server lokal (Appserv) :
a.       Menginstal software server web lokal AppServ ke komputer.
b.      Secara default file-file instalasi terletak di direktori C:\AppServ\www.
c.       Membuat folder baru dalam direktori  www, memberi nama folder tersebut dengan nama modul_4.
d.      Folder tersebut yang akan digunakan untuk menyimpan file-file percobaan.
2.           Percobaan 1 (Form Data Mahasiswa)
Langkah-langkah praktikum :
a.       Membuka browser lalu membuka http”localhost/phpmyadmin.
b.      Membuat database baru dengan nama “mahasiswa” pada kolom create new database.

c.       Buat tabel baru dengan nama “mhs” dengan jumlah field 5 pada database tersebut.
d.      Mengisi field yang sudah dibuat dengan data berikut :
ü  Nim                       (Varchar 20)
ü  Nama                     (Char 40)
ü  Jenis_Kelamin       (enum “Laki-Laki”,”Perempuan”)
ü  Alamat                  (Text)
ü  Jurusan                  (Varchar 45)



e.       Membuka aplikasi Notepad.
f.       Mengetikkan script berikut dalam notepad.




g.        Menyimpan file dengan nama form.php
h.      Membuka file yang sudah disimpan menggunakan browser dengan mengetikkan alamat http://localhost/L200120106/form.php pada kolom alamat.
i.         Mengisi data yang diperlukan dan menekan tombol “Simpan”, kemudian mengamati yang terjadi.
j.        Menggambar hasilnya pada lembar kerja percobaan.





E.        TUGAS
Tuliskan script PHP untuk membuat program penjumlahan menggunakan fungsi variabel seperti gambar di bawah. Kemudian print screen hasilnya di browser dan lampirkan dalam laporan.
Langkah-langkah praktikum :
a.         Buat database sama seperti percobaan sebelumnya.
b.         Membuka aplikasi Notepad.
c.         Mengetikkan script berikut di dalam notepad.


d.         Menyimpan file dengan nama proses.php.
e.         Mengetikkan script berikut di dalam notepad.

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

<?php
//koneksi ke database
$koneksi=mysql_connect ('localhost','root','123');
$db=mysql_select_db('mahasiswa');
$nim = $_GET['nim'];
$query = ("DELETE from mhs WHERE nim='$nim'");
$hasil = mysql_query($query);
echo"Data telah di hapus<br>";

?>




<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

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, jenis_kelamin, 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($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 dimasukkan';

}
}
?>

<hr>
<h2 align="center">Data Mahasiswa</h2>

<?php
//menampilkan data
$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=$posisi+1;

while ($baris = mysql_fetch_row($sql)){
$nim = $baris[0];
$nama = $baris[1];
$jenis_kelamin = $baris[2];
$alamat = $baris[3];
$jurusan = $baris[4];

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='hapus.php?nim=$nim'>Hapus</a> |<a href='edit.php?nama=$nama&nim=$nim&jeniskelamin=$jeniskelamin&alamat=$alamat&jurusan=$jurusan'> edit</a></td>
</tr>";
$no++;
}
echo "</table>";
?>

</body>
</html>


f.          Menyimpan file dengan nama hapus.php.
g.         Lalu mengetikkan script lagi di notepad.

<?php
$koneksi=mysql_connect ('localhost','root','123');
$db=mysql_select_db('mahasiswa');
if (isset($_POST['simpan'])) {
$nim = $_POST['txtnim'];
$nama = $_POST['txtnama'];
$jeniskelamin = $_POST['radiokelamin'];
$alamat = $_POST['txtalamat'];
$jurusan = $_POST['txtjurusan'];

   

//query untuk update data di database
 $query = "UPDATE mhs SET nim = '$nim', nama = '$nama', alamat = '$alamat', jurusan = '$jurusan' WHERE nim = '$nim'" ;
 $hasil = mysql_query($query);
 //hasil
 if ($hasil) {
    include "form.php";
echo "<center>
<h4>
 Update data sukses </h4>
</center>
";
}
else {
                    die($sql . " => " . mysql_error());
                }
               
            }

?>


h.         Menyimpan file dengan nama update.php.
i.           Membuka file yang sudah disimpan menggunakan browser dengan mengetikkan alamat
j.           http://localhost/L200120106/form.php pada kolom alamat.
k.         Hasil pada web.





Hapus




Dari tugas 1 ubahlah form html ke html 5 kemudian hapus kondisi inputan tersebut lalu tambahkan atribut “required” pada form tersebut.
a.             Cara sama seperti Tugas 1 lalu mengubah script menjadi berikut :
b.            Lalu lihat hasilnya.
<!DOCTYPE HTML>
<head>
<title>Data Mahasiswa</title>
</head><body>

<?php
//koneksi ke database
$koneksi=mysql_connect ('localhost','root','123');
$db=mysql_select_db('mahasiswa');
?>

<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" size="25"
required ></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="500"> jenis kelamin</td>
<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"><input type="text" name="txtalamat" rows="5"
required="required" cols="45"></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'])){
$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
$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];
 
  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='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>





Kamis, 09 Oktober 2014

laporan modul 3

LAPORAN MODUL 3


1.    TUJUAN
 Mengetahui dan memahami bahasa pemograman PHP(Hypertext Prepocessor) sebagai bahasa dalam server side programming dalam website.

           2.    LANDASAN TEORI
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.

Penulisan Script PHP :
<?php…. ?>  atau <script language=’php’> … </script> atau
<?...?>  atau <%...%>
Script PHP bisa juga digabung dengan HTML. Script PHP bisa ditempatkan di mana saja pada dokumen HTML. Tetapi scrpt yang diproses oleh server hanya script PHP-nya saja. Selebihnya akan langsung dikirim ke browser client tanpa diproses terlebih dahulu.

         3.    ALAT DAN BAHAN

1.    PC
2.    Sistem Operasi Windows 7
3.    Browser Mozilla Firefox/Chrome
4.    Notepad++
5.    Web server local XAMPP /AppServ
6.    Lembar kerja percobaan

   4.     LANGKAH KERJA 

Percobaan 1  (Variable)
1.      Membuka aplikasi Notepad++.
2.      Mengetikkan script seperti dibawah ini: 

<html>
<head>
<title>variable</title>
</head>
<body>
<h1>Buku Tamu<h1>
<form method='POST' action='variable.php'>
<p>Nama : <input type='text' name='nama' size='20'></p>
<p>Email : <input type='text' name='email' size='30'></p>
<p>Komentar : <textarea name='komentar' cols='30' rows='3'></textarea></p>

<p><input type='submit' value='kirim' name='submit'></p>
</form>
<?php
if($submit){
echo"</br>Nama : $nama";
echo"</br>Email : $email";
echo"</br>Komentar : $komentar";
}
?>
</body>

</html>



3.      Menyimpan file dengan nama variable.php.
4.      Membuka file yang sudah disimpan mengunakan web browser dengan mengetik alamat http://localhost/modul_3/variable.php pada kolom alamat.
5.       Mengisi data yang diperlukan dan menekan tombol “Kirim”
6.      Hasil :

Percobaan 2 (Struktur Kendali)

1.       Membuka aplikasi Notepad++.
2.       Mengetikkan script seperti dibawah ini : 

<!doctype html>
<head>
<title>kendali</title>
</head>
<body>
<h1>Nilai<h1>
<form method='POST' action='kendali.php'>
<p>Masukkan Nilai Angka (0-100) : <input type='number' name='nilai' size='3' required></p>
<p><input type='submit' value='Proses' name='submit'></p>
</form>
<?
if ($submit){
if($nilai==''){
$huruf='"Nilai kosong/belum diisi"';
}elseif($nilai<=20){
$huruf='E';
}elseif($nilai<=40){
$huruf='D';
}elseif($nilai<=60){
$huruf='C';
}elseif($nilai<=80){
$huruf='B';
}elseif($nilai<=100){
$huruf='A';
}else{
$huruf='"Nilai yang dimasukkan salah!!"';
}
echo"Nilai angka adalah $nilai</br>";
echo"Maka nilai huruf adalah $huruf";
}
?>
</body>

</html>

3.       Menyimpan file dengan nama kendali.php.
4.       Membuka file yang sudah disimpan mengunakan web browser dengan mengetik alamat http://localhost/modul_3/kendali.php pada kolom alamat.
5.       Mengisi data yang diperlukan dan menekan tombol “Proses”
6.       Hasil :


Percobaan 3 (Upload File)

1.       Membuka aplikasi Notepad++.
2.       Mengetikkan script seperti dibawah ini : 

<html>
<head>
<title>Upload file</title>
</head>
<body>
<?
if($submit){
copy ($file,'C:\\AppServ\\www\\mod3\\'.$file_name);
echo"<h3>File Berhasil di upload</h3>
</br></br>
<img border='0' src='./$file_name'></br></br>
<b>Informasi File :</b></br>
Nama File : $file_name </br>
Ukuran File : $file_size byte</br>
Tipe File : $file_type </br>";
}else{
?>
<form method='POST' enctype='multipart/form-data'
action='upload.php'>
Upload file : <input type='file' name='file' size='20'></br>
<input type='submit' name='submit' value='UPLOAD'>
</form>
<?
}
?>
</body>

</html>

3.       Menyimpan file dengan nama upload.php.
4.       Membuka file yang sudah disimpan mengunakan web browser dengan mengetik alamat http://localhost/modul_3/upload.php pada kolom alamat.
5.       Mencari gambar (atau file lain) untuk di upload dengan menekan tombol “Browse” kemudian menekan “Upload”.
6.       Hasil :



Percobaan 4 (Fungsi Tanggal dan Waktu)

1.       Membuka aplikasi Notepad++.
2.       Mengetikkan script seperti dibawah ini : 

<html>
<head>
<title>Fungsi Tanggal dan Waktu</title>
</head>
<body>
<?
$jam=date("H:i:s A");
$waktu=date("d-m-Y");
$hari=date("l");
$tanggal=date("d");
$bulan=date("F");
$tahun=date("Y");
echo " Sekarang jam $jam</br>";
echo "Sekarang tanggal $waktu</br>";
echo "Lebih detalnya hari $hari Tanggal $tanggal Bulan $bulan Tahun $tahun";
?>
</body>

</html>


3.       Menyimpan file dengan nama tanggal.php.
4.       Membuka file yang sudah disimpan mengunakan web browser dengan mengetik alamat http://localhost/modul_3/tanggal.php pada kolom alamat.
5.       Hasil :



    5.    TUGAS

1.      Menuliskan script PHP untuk membuat program penjumlahan menggunakan fungsi variabel .
Script  :

<html>
<head>
<title>tugas</title>
</head>
<body>
<h1>
kalkulator</h1>
<form method='post' action='penjumlahan.php'>
  <p>
variable A :<input type='text' name='variableA'></p>
<p>
variable B :<input type='text' name='variableB'></p>
<p>
<input type='submit' value='jumlahkan' name='submit'></p>
</form>
<?php
$variableA=$_POST['variableA'];
$variableB=$_POST['variableB'];
$hasil=$variableA+$variableB;
if ($_POST['submit']){
echo"</br>variable A: $variableA";
echo"</br>variable B : $variableB";
echo"</br>jadi Nilai A ditambah Nilai B adalah : $hasil";
}
?>
</body>

</html>


Hasil  :