Monday, August 14, 2017

Percobaan Form Dengan HTML, PHP, dan CSS


A.    TUJUAN

  • Mengetahui Konsep Dasar HTML, CSS dan PHP 
  • Mengetahui Konsep Kerja Form Dalam Tipe Dokumen HTML
  • Mengetahui Keterkaitan Konsep CSS Dengan HTML 
  • Mengetahui Keterkaitan Konsep PHP Dengan HTML
B.      KONSEP DASAR
  • Hyper Text Markup Language (HTML) adalah bahasa markupyang digunakan untuk membuat sebuah halamn web. HTML inilah yang menyusun sebuah halaman web menjadi sebuah halaman yang sebagaimana kita lihat di penjelajah browser.
  • Cascading Style Sheets (CSS) merupakan bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa MarkUp Language dan biasanya digunakan untuk mengatur tampilan atau desain suatu halaman HTML.
  • Hypertext Preprocessor (PHP) adalah pemrograman script server side yang didesain untuk pengembangan web.

C. Langkah Kerja : 

        Disini saya akan membuat Script code tentang News Technology dan membuat Buku tamu dengan Dmenggunakan HTML + CSS + PHP

1. Buka aplikasi tempat kalian menulis code
contoh; Notepad++, Bracket, Sublime dll :)))

2.  Saya akan membuat Web yang pertama yaitu Berita

<html>
<head>
<style type="text/css">
table
    {border-collapse:colapse;
    border:1px solid white;
    }
    #menu {
            height:40px;
            width:100%
            background:url(bg-nav.jpg)repeat-x;
            }
    #menu table {
        border-color: none;
        background-color: black;
    }
    #menu {
        height:40px;
        text-align: center;
        vertical-align:center;
        color:#fff;
        font: DFPOP1-W9;
    }
    isi {
        padding:10 10 10;
    }
    #isi p{
        color:black;
        font:11 px candara,arial,tahoma;
       
        padding-bottom: 5px;
    }
    #isi img{
        border:1px , solid black;
        width :80px;
        height: 100px;
    }
    .table-menu{
        vertical-align: top;
        border-collapse: :colapse;
        border:1px solid black;
        background-color: #0066cc;
    }
    .footer{
        background-color: yellow;
    }new table{
        border-color: none;
    }
 
}
   
    </style>
    </head>
   
    <body>
    <table width="70%" align="center">
        <tr>
        <td colspan="2"><img src="img/lol.jpg"></td>
        </tr>
        <tr>
            <td height="76" colspan ="2">
                <div id="menu">
                    <table width="100%" height="57">
                        <tr>
                        <td height="26" align="center"><a href="latihan2.php"><font color ="white">Home</font></a></td>
                        <td align="center"><a href="#"><font color ="white">Profil</font></a></td>
                        <td align="center"><a href="#"><font color ="white">Produk</font></a></td>
                        <td align="center"><a href="#"><font color ="white">Kontak</font></a></td>
                        <td align="center"><a href="tamu.php"><font color ="white">Buku Tamu</font></a></td>
                        </tr>
                    </table>
                </div>
            </td>
      </tr>
        <tr>
            <td width ="70%" bgcolor="#FFFFFF">
                <div id="isi">
                    <h1 style="color:black;">Yuk Kenalan Sama Bitcoin! Lagi Ramai Dipakai Hacker, Ini 11 Fakta Tentang Mata Uang Digital Pertama</h1>
              </div> <div id="new">
                    <table align="right" height="2300">
                        <tr bgcolor="#FFF500">
                        <td width="300" height="800" bgcolor="#FFB702" ><p><center><font size="14">News Update</font></center></p>
                          <p><center><font size="5">Untuk Melihat Berita Lainya Bisa Kunjungi </font></center></p>
                          <p><center><a href="jalantikus.com"><font size="4">Jalantikus.com</font></a></center></p>
                          <p><center>
                            <p><a href="cnn.co.id"><font size="4">CNN News</font></a>&nbsp;</p>
                            <p>&nbsp;</p>
                              <p><font size="5">Ingin Belajar Bahasa Pemrograman</font> <font size="5">Bisa Kunjungi</font></p>
                              <p>&nbsp;</p>
                       
                            <p><a href="codeacademy.com"><font size="4">Disini</font></a>&nbsp;</p>
                          </center></p></td>
                       
                      </tr>
                    </table>
                </div>
                    <center><img src="img/lol1.jpg" width="690" height="370"></center>
                <br>
                    <p><font size="4" font face="candara,arial,tahoma">&nbsp;&nbsp;&nbsp; Kasus WannaCry kemarin masih menjadi buah bibir di mana-mana. Bagaimana tidak?! Kasus cyberattack yang terjadi kemarin itu disebut-sebut sebagai salah satu kasus kejahatan dunia maya paling besar di dunia. Sudah banyak laporan dari berbagai belahan dunia atas kasus yang satu ini. Nah salah satu hal yang menarik perhatian dunia adalah caranya para hacker itu untuk mendapatkan uang tebusannya. Mereka memilih menggunakan Bitcoin sebagai media transaksinya.</font></p>
                <br>
                <br>
                <h1><font size="4" font face="candara,arial,tahoma"><center>1. Mata uang digital yang satu ini bisa dibilang cryptocurency pertama di dunia. Kalau dulu uang  lari ke Swiss atau Singapura, sekarang mungkin pada lari ke Bitcoin</center></font></h1>
                <center><img src="img/lol2.gif" width="520" height="270"></center>
                <br>
                <br>
                <h1><font size="4" font face="candara,arial,tahoma"><center>2. Nggak ada yang tahu siapa pencipta Bitcoin. Yang ada cuma nama anonim "Satoshi Nakamoto" sebagai penggagas pertama Bitcoin</center></font></h1>
                <center><img src="img/lol3.jpg" width="520" height="270"></center>
                <br>
                <br>
                <h1><font size="4" font face="candara,arial,tahoma"><center>3. Yang bikin Bitcoin digemari adalah sistemnya yang "peer-to-peer" tanpa perlu pihak ketiga. Transaksi jadi lebih terjaga rahasianya</center></font></h1>
                <center><img src="img/lol4.jpg" width="520" height="270"></center>
                <br>
                <br>
                <h1><font size="4" font face="candara,arial,tahoma"><center>4. Karena itu nilai bisa berubah tergantung pasar. 1 BTC pernah cuma puluhan ribu Rupiah, tapi pernah juga mencapai Rp5 juta per 1 BTC-nya!</center></font></h1>
                <center><img src="img/lol5.jpg" width="520" height="270"></center>
                <br>
                <br>
                <br>
                <p><font size="4" font face="candara,arial,tahoma">&nbsp;&nbsp;&nbsp; Gimana? Udah sedikit paham soal Bitcoin? FYI aja nih, cara mendapatkan Bitcoin itu ada 3. Pertama mining. Ini rada susah karena harus bisa mendekripsi data open source Bitcoin. Yang kedua kerja dan minta bayaran dari Bitcoin. Nah cara terakhir nih yang paling gampang. Tinggal beli aja. Di toko-toko ritel juga udah bisa kok buat beli Bitcoin. Ribet dan mungkin juga nggak perlu-perlu amat bagi orang biasa. Tapi buat mereka yang selalu ingin "bersembunyi " di dunia maya melakukan kegiatan ilegal, mata uang ini ternyata bisa dimanfaatkan habis-habisan. Wah perlu diawasi nih produk kekinian macam Bitcoin ini . . .</font></p>
              <p>&nbsp;</p>
                <table width="1350" height="1" border="1">
                  <tbody>
                    <tr>
                      <td width="700" height="42" bgcolor="#7B7272">
                        <footer>
                          <center>
                            <strong>&copy; 2017 <a href="latihan2.php"><font color="black">Zaqi Salman </font></a>All Right Reserved &trade;
                            </strong>
                          </center>
                      </footer></td>
                    </tr>
                  </tbody>
              </table>
                <footer></footer>
            </td>
      </tr>
        </table>
           </body>
   
</html>


3. Jika sudah simpan dengan format .php , disini saya akan menyimpan dengan nama latihan2.php

 4. Lalu buat file yang baru untuk menambahkan Fitur Buku Tamu , lalu save dengan nama tamu.php

<html>
<head>
<style type="text/css">
table
    {border-collapse:colapse;
    border:1px solid white;
    }
    #menu {
            height:40px;
            width:100%
            background:url(bg-nav.jpg)repeat-x;
            }
    #menu table {
        border-color: none;
        background-color: black;
    }
    #menu {
        height:40px;
        text-align: center;
        vertical-align:center;
        color:#fff;
        font: DFPOP1-W9;
    }
    isi {
        padding:10 10 10;
    }
    #isi p{
        color:black;
        font:11 px candara,arial,tahoma;
      
        padding-bottom: 5px;
    }
    #isi img{
        border:1px , solid black;
        width :80px;
        height: 100px;
    }
    .table-menu{
        vertical-align: top;
        border-collapse: :colapse;
        border:1px solid black;
        background-color: #0066cc;
    }
    .footer{
        background-color: yellow;
    }new table{
        border-color: none;
    }
 
}
  
    </style>
    </head>
  
    <body>
    <table width="70%" align="center">
        <tr>
        <td colspan="2"><img src="img/lol.jpg"></td>
        </tr>
        <tr>
            <td height="76" colspan ="2">
                <div id="menu">
                    <table width="100%" height="57">
                        <tr>
                        <td height="26" align="center"><a href="latihan2.php"><font color ="white">Home</font></a></td>
                        <td align="center"><a href="#"><font color ="white">Profil</font></a></td>
                        <td align="center"><a href="#"><font color ="white">Produk</font></a></td>
                        <td align="center"><a href="#"><font color ="white">Kontak</font></a></td>
                        <td align="center"><a href="tamu.php"><font color ="white">Buku Tamu</font></a></td>
                        </tr>
                    </table>
                </div>
            </td>
      </tr>
        <tr>
            <td width ="70%" bgcolor="#FFFFFF">
                <div id="isi">
              </div> <div id="new">
                    <table align="right" height="950">
                        <tr bgcolor="#FFF500">
                        <td width="300" height="800" bgcolor="#FFB702" ><p><center><font size="14">News Update</font></center></p>
                          <p><center><font size="5">Untuk Melihat Berita Lainya Bisa Kunjungi </font></center></p>
                          <p><center><a href="jalantikus.com"><font size="4">Jalantikus.com</font></a></center></p>
                          <p><center>
                            <p><a href="cnn.co.id"><font size="4">CNN News</font></a>&nbsp;</p>
                            <p>&nbsp;</p>
                              <p><font size="5">Ingin Belajar Bahasa Pemrograman</font> <font size="5">Bisa Kunjungi</font></p>
                              <p>&nbsp;</p>
                      
                            <p><a href="codeacademy.com"><font size="4">Disini</font></a>&nbsp;</p>
                          </center></p></td>
                      
                      </tr>
                    </table>
                </div>
                    <form action="terima.php" method="post">
        <font face="DFPOP1-W9" size="5px" color="black"><h1><center>Buku Tamu</center></h1>
            <p><center>Silahkan isi buku tamu dibawah ini untuk meninggalkan pesan anda</center></p></font>
        <center><h3>Nama    : </h3>   
        <input name="nama" type="text" placeholder="Zaqi Salman">
        <br><br>
      
        <h3>Email  :</h3><input name="email" type="text" required="" placeholder="zaqisalman0120@gmail.com">
        <br><br>
      
            <h3>Jenis Kelamin    : </h3><input type="radio" name="jk" required="" value="Laki-Laki">Laki - laki &nbsp;&nbsp; &nbsp;&nbsp;
            <input type="radio" name="jk" value="Wanita">Wanita
        <br><br>
          
             <h3>Produk Yang Disukai    : </h3><input type="checkbox" name="pk" required="" value="Berita">Berita &nbsp;&nbsp; &nbsp;&nbsp;
            <input type="checkbox" name="pk" value="Tutorial">Tutorial
        <br><br>
      
      
        <h3>Kantor Cabang : <br><br>
        <select name="kantor" required="">
            <option>--PILIH--</option>
            <option>Bandung</option>
            <option>Jakarta</option>
            <option>Bali</option>
            </select>
        </h3>
          
           <h3> Pesan   : </h3><textarea cols="40" rows="5" name="pesan" type="text" required="" placeholder="Masukan pesan anda"></textarea>
        <br><br><br>
    </center>
      
        <center><input type="submit" value="Kirim"><input type="reset" value="Hapus"></center>
    </form>
              <p>&nbsp;</p>
                <table width="1350" height="1" border="1">
                  <tbody>
                    <tr>
                      <td width="700" height="42" bgcolor="#7B7272">
                        <footer>
                          <center>
                            <strong>&copy; 2017 <a href="latihan2.php"><font color="black">Zaqi Salman </font></a>All Right Reserved &trade;
                            </strong>
                          </center>
                      </footer></td>
                    </tr>
                  </tbody>
              </table>
                <footer></footer>
            </td>
      </tr>
        </table>
           </body>
  
</html>

5. Yang terakhir buatlah proses penerimaan tamu , berikut adalah code nya

<html>
<head>
<style type="text/css">
table
    {border-collapse:colapse;
    border:1px solid white;
    }
    #menu {
            height:40px;
            width:100%
            background:url(bg-nav.jpg)repeat-x;
            }
    #menu table {
        border-color: none;
        background-color: black;
    }
    #menu {
        height:40px;
        text-align: center;
        vertical-align:center;
        color:#fff;
        font: DFPOP1-W9;
    }
    isi {
        padding:10 10 10;
    }
    #isi p{
        color:black;
        font:11 px candara,arial,tahoma;
      
        padding-bottom: 5px;
    }
    #isi img{
        border:1px , solid black;
        width :80px;
        height: 100px;
    }
    .table-menu{
        vertical-align: top;
        border-collapse: :colapse;
        border:1px solid black;
        background-color: #0066cc;
    }
    .footer{
        background-color: yellow;
    }new table{
        border-color: none;
    }
 
}
  
    </style>
    </head>
  
    <body>
    <table width="70%" align="center">
        <tr>
        <td colspan="2"><img src="img/lol.jpg"></td>
        </tr>
        <tr>
            <td height="76" colspan ="2">
                <div id="menu">
                    <table width="100%" height="57">
                        <tr>
                        <td height="26" align="center"><a href="latihan2.php"><font color ="white">Home</font></a></td>
                        <td align="center"><a href="#"><font color ="white">Profil</font></a></td>
                        <td align="center"><a href="#"><font color ="white">Produk</font></a></td>
                        <td align="center"><a href="#"><font color ="white">Kontak</font></a></td>
                        <td align="center"><a href="tamu.php"><font color ="white">Buku Tamu</font></a></td>
                        </tr>
                    </table>
                </div>
            </td>
      </tr>
        <tr>
            <td width ="70%" bgcolor="#FFFFFF">
                <div id="isi">
              </div> <div id="new">
                    <table align="right" height="950">
                        <tr bgcolor="#FFF500">
                        <td width="300" height="800" bgcolor="#FFB702" ><p><center><font size="14">News Update</font></center></p>
                          <p><center><font size="5">Untuk Melihat Berita Lainya Bisa Kunjungi </font></center></p>
                          <p><center><a href="jalantikus.com"><font size="4">Jalantikus.com</font></a></center></p>
                          <p><center>
                            <p><a href="cnn.co.id"><font size="4">CNN News</font></a>&nbsp;</p>
                            <p>&nbsp;</p>
                              <p><font size="5">Ingin Belajar Bahasa Pemrograman</font> <font size="5">Bisa Kunjungi</font></p>
                              <p>&nbsp;</p>
                      
                            <p><a href="codeacademy.com"><font size="4">Disini</font></a>&nbsp;</p>
                          </center></p></td>
                      
                      </tr>
                    </table>
                </div>
          <html>
  
<body>
     <center>
    <?php
    $nama = $_POST ['nama'];
    $email = $_POST ['email'];
    $jk = $_POST ['jk'];
    $pk = $_POST ['pk'];
    $kantor = $_POST ['kantor'];
    $pesan = $_POST ['pesan'];
       
       
    ?>
    <center>
   <h3> Terima Kasih <?php echo $nama ; ?> telah mengisi daftar tamu</h3><h3> Yang berjenis kelamin <?php echo $jk ; ?></h3><h3> Dan anda menyukai produk <?php echo $pk ; ?></h3>
    <h3> Dengan Email <?php echo $email ; ?></h3>
        <h3> Dan Pesan  <?php echo $pesan ; ?> Anda akan kami kirimkan kepada kantor kami yg berada di <?php echo $kantor ; ?></h3>
     
        </center>
    <br>
    <br>
    <a href="tamu.php"><center><font face="DFPOP1-W9" size="100px" color="black">HOME </font></center></a>
</body>
    </html>
              <p>&nbsp;</p>
                <table width="1350" height="1" border="1">
                  <tbody>
                    <tr>
                      <td width="700" height="42" bgcolor="#7B7272">
                        <footer>
                          <center>
                            <strong>&copy; 2017 <a href="latihan2.php"><font color="black">Zaqi Salman </font></a>All Right Reserved &trade;
                            </strong>
                          </center>
                      </footer></td>
                    </tr>
                  </tbody>
              </table>
                <footer></footer>
            </td>
      </tr>
        </table>
           </body>
  
</html>

6. Jika sudah save dengan nama terima.php

     Terlepas dari tampilan yang kurang rapi, kita telah membuat sebuah form utuh (tampilan form dapat diubah dengan mudah menggunakan CSS). mohon maaf bila kurang detail.

D. Kesimpulan
       Selamat kita sudah membuat Web yang terdiri dari Form, HTML , PHP dan CSS. Di web ini juga kita sudah bisa mempelajari proses GET. 
Harap sabar dalam segala tahap pengerjaan yang rumit ini! :((

E. Daftar Pustaka

http://www.tutorialbelajarblog.com/2015/02/cara-membuat-kotak-warna-highlight-box-di-blog.html
Posted by at No comments:
Subscribe to: Posts (Atom)