-
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 halaman 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 di tulis dalam bahasa markup language dan biasanya digunakan untuk mengatur tampilan / desain suatu halaman HTML
·        -  Hypertext Preprocessor (PHP) adalah pemrograman script server side yang didesain untuk pengembangan web

C. Langkah Kerja
1. Dalam keadaan sudah dalam di aplikasi HTML Editor buatlah file dengan nama Buku Form.php kemudian mulailah ketik kode berikut : 

<html>
    <head>
        <title>Tugas 4 </title>
        <style type="text/css">
          
            
            
            table{
                border-collapse:collapse;
                border:1px solid black;
            }
            
            #menu{
                height:50px;
                width:100%;
                background:url(bg-nv.png) repeat-x;
                font:white;
            }
            
            #menu table{
                border:none;
            }
            
            
           
            
            #menu td{
                height:40px;
                text-align :center;
                vertical-align:middle;
                color:#fff;
                font : bold 11 px Candara, Arial, Tahoma;
            }
            #isi {padding: 10 10 10 10;}

            #isi p {
                color : black;
                font : 14px Candara, Arial, Tahoma;
                padding-bottom:5px;
               
               
            }
            #isi ul {
                color : black;
                font : 14px Candara, Arial, Tahoma;
                padding-bottom:5px;
               
               
            }
            
            
         
            
            .table-menu{
                vertical-align: top;
                border-collapse: collapse;
                border:1px solid black;
                background-color:#0066cc;
            }
            
            .footer{
                background-color:cadetblue;
            }
             .header{
                background-image:url(bg-nav.jpg);
                 background-size:100%;
                 background-repeat:no-repeat;
                 padding-top:100px;
                 font:50px Tahoma;
                 color: skyblue;
                 text-align: center;
            }
        </style>

</head>
    
<body>
    <table width='70%' align = 'center'>
    <tr>
        <td class = 'header' colspan=2 >
        ANGGAHEALTH HERBADRINK
        </td>
        </tr>
    <tr>
        <td colspan=2>
            <div id='menu'>
                <table width='100%'>
                    <tr>
                        <td align='center'><a href ="susu.php">Depan</td>
                        <td align='center'><a href ="">Profil</td>
                        <td align='center'><a href ="">Produk</td>
                        <td align='center'><a href ="">Kontak</td>
                        <td align='center'><a href ="">Forum</td>
                    
                    </tr>
                </table>
            </div>
        </tr>
    <tr>
        <td width='70%'>
        <div id='isi'>
            <h1 style='color : blue; font: bold 16px Candara, Arial, Tahoma;'>Ayo Minum Susu</h1>
            
            
            <form  action="tamu.php" method="post">


<p>
Nama Lengkap : <br>
<input type="text" name="namalengkap">
    </p>


<p>
Jenis Kelamin : 
<input type="radio" name="kelamin" value="Laki Laki">Male
<input type="radio" name="kelamin" value="Perempuan">Female
    </p>

<p>


Email : <br>
<input type="text" name="email">

    </p>
<p>
Website : <br>
<input type="text" name="website">
    </p>
<p>
Produk Yang Disukai : <br>
<input type="checkbox" name="produk" value="Susu Sapi">Susu Sapi<br>
<input type="checkbox" name="produk1" value="Susu Kambing">Susu Kambing<br>
    </p>

    <p>
Komentar : <br>
<textarea name="pesan" type="text"></textarea>
    </p>

<p>
Kantor Cabang : <br>
<textarea name="ktr" type="dropdown"></textarea>

            </p>
            
<p>
<input type="submit"  value="KIRIM">
    </p>
</form>
            </div>
        </td>
    
    <td width="30%" class='table-menu '>  Daftar Artikel : 
        <li><a href ="Buku Tamu.php">Buku Tamu
        </li>  
   
        <li><a href ="">Transfer
        </li>    
        <li><a href ="">Hubungi Kami
        </li>    
        <li><a href ="">Komplain
        </li>    
</td>
  </tr>
    <tr>
    <td colspan ='2' height ='50' class='footer'>
        <p style='color : blue; font: bold 16px Candara, Arial, Tahoma; text-align : center';>
        COPYRIGHT ANGGA KAHAERUL
        </p>    
        </td>

    </tr>
    </table>
    </body>
</html>


Tampilan : 






2. Buatlah File Baru dengan nama susu.php lalu siapkan sebuah gambar navigasi dengan nama bg-nav.jpg, dan siapkan lah gambar susu sapi dengan ukuran kecil dan beri nama bg-nv.png: 

<html>
    <head>
        <title>Tugas 4 </title>
        <style type="text/css">
          
            
            
            table{
                border-collapse:collapse;
                border:1px solid black;
            }
            
            #menu{
                height:50px;
                width:100%;
                background:url(bg-nv.png) repeat-x;
                font:white;
            }
            
            #menu table{
                border:none;
            }
            
            
           
            
            #menu td{
                height:40px;
                text-align :center;
                vertical-align:middle;
                color:#fff;
                font : bold 11 px Candara, Arial, Tahoma;
            }
            #isi {padding: 10 10 10 10;}

            #isi p {
                color : black;
                font : 11px Candara, Arial, Tahoma;
                padding-bottom:5px;
               
               
            }
            #isi ul {
                color : black;
                font : 11px Candara, Arial, Tahoma;
                padding-bottom:5px;
               
               
            }
            
            
         
            
            .table-menu{
                vertical-align: top;
                border-collapse: collapse;
                border:1px solid black;
                background-color:#0066cc;
            }
            
            .footer{
                background-color:cadetblue;
            }
             .header{
                background-image:url(bg-nav.jpg);
                 background-size:100%;
                 background-repeat:no-repeat;
                 padding-top:100px;
                 font:50px Tahoma;
                 color: skyblue;
                 text-align: center;
            }
        </style>

</head>
    
<body>
    <table width='70%' align = 'center'>
    <tr>
        <td class = 'header' colspan=2 >
        ANGGAHEALTH HERBADRINK
        </td>
        </tr>
    <tr>
        <td colspan=2>
            <div id='menu'>
                <table width='100%'>
                    <tr>
                        <td align='center'><a href ="">Depan</td>
                        <td align='center'><a href ="">Profil</td>
                        <td align='center'><a href ="">Produk</td>
                        <td align='center'><a href ="">Kontak</td>
                        <td align='center'><a href ="">Forum</td>
                    
                    </tr>
                </table>
            </div>
        </tr>
    <tr>
        <td width='70%'>
        <div id='isi'>
            <h1 style='color : blue; font: bold 16px Candara, Arial, Tahoma;'>Ayo Minum Susu</h1>
            
            <img src="susu.jpg" width='20%' height ='15%' style = "float:left:padding-right : 10px;"/>
            <p>
            Susu adalah sebuah biasanya berarti cairan bergizi yang di hasilkan oleh kelenjar susu mamalia betina. susu adalah sumber gizi utama bagi bayi sebelum mereka dapat mencerna makanan padat. Susu binatang biasanya sapi juga di olah menjadi berbagai produk sperti mentega, yoghurt, eskrim, keu, susu kental manis, susu bubuk dan lain lainnya untuk di konsumsi manusia, semua orang di dunia ini membutuhkan susu untauak menopang hidup nya. baik dari bayi sampai orang yang lanjut usia </p>
            <p> Khasiat Susu sapi ternyata banyak sekali. susu yang banyak di gemari anak anak ini di sebut juga darah putih bagi kesehatan tubuh. Dalam segelas susu terdapat antara lain :
            <ul>
                <li>
                
                Potasium : yang menggerakan dinding pembuluh darah agar tetap stabil, menghindarkan anda dari penyakit darah tinggi dan jantung</li>
                <li>
                
                Zat besi : Mempertahankan kulit tetap bersinar</li>
                <li>
                
                Tyrosine : mendorong hormon kegembiraan dan membuat tidur lebih nyenyak </li>
                <li>
                
                Kalsium : Menguatkan tulang</li>
                <li>
                
                Magnesium : Menguatkan jantung dan sistem saraf sehingga tidak mudah lelah</li>
                <li>
                
                Yodium : Meningkatkan kerja otak besar</li>
                <li>
                
                Seng : Menyembuhkan luka dengan cepat</li>
                 <li>
                
                Vitamin B2 : Meningkatan ketajaman penglihatan</li>
            
            
            </ul>
            </p>
            </div>
        </td>
    
    <td width="30%" class='table-menu '>  Daftar Artikel : 
<li><a href ="Buku Tamu.php">Buku Tamu
        </li>    
        <li><a href ="">Transfer
        </li>    
        <li><a href ="">Hubungi Kami
        </li>    
        <li><a href ="">Komplain
        </li>    
</td>
  </tr>
    <tr>
    <td colspan ='2' height ='50' class='footer'>
        <p style='color : blue; font: bold 16px Candara, Arial, Tahoma; text-align : center';>
        COPYRIGHT ANGGA KAHAERUL
        </p>
        
        </td>
  
   
    
         
    </tr>

    </table>

    
    
    
    
    
    </body>





</html>



Tampilan :



3. Buatlah file baru dengan nama tamu.php kemudian masukan kode :

<html>
    <head>
        <title>Tugas 4 </title>
        <style type="text/css">
          
            
            
            table{
                border-collapse:collapse;
                border:1px solid black;
            }
            
            #menu{
                height:50px;
                width:100%;
                background:url(bg-nv.png) repeat-x;
                font:white;
            }
            
            #menu table{
                border:none;
            }
            
            
           
            
            #menu td{
                height:40px;
                text-align :center;
                vertical-align:middle;
                color:#fff;
                font : bold 11 px Candara, Arial, Tahoma;
            }
            #isi {padding: 10 10 10 10;}

            #isi p {
                color : black;
                font : 11px Candara, Arial, Tahoma;
                padding-bottom:5px;
               
               
            }
            #isi ul {
                color : black;
                font : 11px Candara, Arial, Tahoma;
                padding-bottom:5px;
               
               
            }
            
            
         
            
            .table-menu{
                vertical-align: top;
                border-collapse: collapse;
                border:1px solid black;
                background-color:#0066cc;
            }
            
            .footer{
                background-color:cadetblue;
            }
             .header{
                background-image:url(bg-nav.jpg);
                 background-size:100%;
                 background-repeat:no-repeat;
                 padding-top:100px;
                 font:50px Tahoma;
                 color: skyblue;
                 text-align: center;
            }
        </style>

</head>
    
<body>
    <table width='70%' align = 'center'>
    <tr>
        <td class = 'header' colspan=2 >
        ANGGAHEALTH HERBADRINK
        </td>
        </tr>
    <tr>
        <td colspan=2>
            <div id='menu'>
                <table width='100%'>
                    <tr>
                        <td align='center'><a href ="susu.php">Depan</td>
                        <td align='center'><a href ="">Profil</td>
                        <td align='center'><a href ="">Produk</td>
                        <td align='center'><a href ="">Kontak</td>
                        <td align='center'><a href ="">Forum</td>
                    
                    </tr>
                </table>
            </div>
        </tr>
    <tr>
        <td width='80%'>
        <div id='isi'>
            <h1 style='color : blue; font: bold 16px Candara, Arial, Tahoma;'>Ayo Minum Susu</h1>
<?php
        $namalengkap = $_POST['namalengkap'];
        $email = $_POST['email'];
        $website = $_POST['website'];
        $pesan = $_POST['pesan'];
$ktr = $_POST['ktr'];
$kelamin= $_POST['kelamin'];

        echo "Nama : " .$namalengkap. "<br>";
echo " Email :" .$email."<br>"; 
echo " Website :".$website."<br>";
echo " Jenis Kelamin :" .$kelamin. "<br>";
            
         echo "Menyukai Produk : ";
            if (isset($_POST['produk']))
                echo $_POST['produk'];
             echo   " , ";
            if (isset($_POST['produk1']))
                echo $_POST['produk1'];
echo "<br>";
echo " Kantor Cabang :" .$ktr."<br>";
        echo "pesan :" .$pesan."<br>";
        
       ?>


            </p>
            </div>
        </td>
    
    <td width="30%" class='table-menu '>  Daftar Artikel : 
<li><a href ="Buku Tamu.php">Buku Tamu
        </li>    
        <li><a href ="">Transfer
        </li>    
        <li><a href ="">Hubungi Kami
        </li>    
        <li><a href ="">Komplain
        </li>    
</td>
  </tr>
    <tr>
    <td colspan ='2' height ='50' class='footer'>
        <p style='color : blue; font: bold 16px Candara, Arial, Tahoma; text-align : center';>
        COPYRIGHT ANGGA KAHAERUL
        </p>
        
        </td>
  
   
    
         
    </tr>

    </table>

    
    
    
    
    
    </body>





</html>

Tampilan :


4. Kesimpulan
Dalam mempelajari bahasa pemrograman, sebaiknya kita mempelajari terlebih dahulu fungsi fungsi deklarasi dari suatu perintah, karena apabila kita langsung menerapkan koding tanpa mengetahui fungsi dari sebuah perinah itu apa, maka selanjutnya kita akan dibuat bingung dan tidak terarah. oleh karena itu lebih baik koding di atas di pelajari, bukan hanya mengandalkan di copy- paste. dan juga apabila kita menemukan sebuah kesalahan dalam pengkodean program , janganlah menyerah pecahkanlah permasalahan itu, karena masalah bukan untuk di takuti akan tetapi di hadapi dengan bijak.

5.Daftar Pustaka
Referensi Konsep Dasar, www.google.com
Referensi Konsep Dasar,https://www.codepolitan.com/tutorial/belajar-html-dasar
Referensi Konsep Dasar CSS , gunturrestuperdana.blogspot.com/2012/04/pengertian-css-konsep-dasar-css.html
Refereni Konsep Dasar Php, www.duniailkom.com › Tutorial PHP


Komentar

Posting Komentar

Postingan populer dari blog ini

Studi Kasus : Basis Data Toko Online Ladang Baju Oleh Angga Kahaerul

-
Gambar
Toko online LADANG BAJU bermaksud membuat sistem Basis Data untuk menangani Sistem Informasi penjualan barangnya. Di toko online itu memiliki 2 kategori barang yaitu (1) Barang (2) Makanan dengan atribut: kd_kat dan nm_kat. Seorang pelanggan dapat membeli barang lebih dari satu dalam satu kategori, tetapi tidak bisa memesan banyak barang dengan banyak kategori. Di tiap – tiap kategori memiliki barang yang didalamnya sesuai dengan kategorinya. Dimana isi dai entitas barang yaitu: kd_brg, nm_brg, hrg_brg, kd_kat. Sementara itu pelanggan (kd_pel, nm_pel, almt_pel, no_telp) dapat memesan dengan mengisi tabel order  copyrighted : anggak (kd_tran, kd_brg, kd_pel, jml, hrg_byr) dimana kd_brg, kd_pel dan jml di isi manual oleh pelanggan. Tugas: 1. Identifikasi dan tentukan entitas-entitas yang terlibat dalam sistem tersebut 2. Lengkapi(apabila diperlukan) dengan atribut untuk setiap entitas 3. Tentukan Hubungan/Relasinya 4. Tentukan Kardinalitasnya 5. Tentukan PK dan FK nya 6. Bu...
Baca selengkapnya

Penjelasan Simbol UML Diagram : Use Case, Activity, Sequence, Class, State Chart, Kolaborasi.

-
Gambar
Unified Modeling Language  adalah sebuah bahasa yang berdasarkan grafik/gambar untuk visualisasi, menspesifikasikan, membangun, dan pendokumentasian dari sebuah sistem pengembangan perangkat lunak berbasis OOP ( Object-Oriented Programming ). Dalam hal ini,  Unified Modeling Language  (UML) bukanlah merupakan bahasa pemprograman tetapi model-model yang tercipta berhubungan langsung dengan berbagai macam bahasa pemrograman, sehingga memungkinkan melakukan pemetaan  (mapping)  langsung dari model-model yang dibuat dengan  Unified Modeling Language  (UML)   dengan bahasa-bahasa pemprograman berorientasi objek seperti  Java, Borland Delphi, Visual Basic, C++,  dan lain-lain . Berikut beberapa penjelasan simbol diagram yang terdapat pada UML. A. Use Case Diagram B. Activity Diagram  C. Sequence Diagram D. Class Diagram E. State Chart F.  Kolaborasi Diagram Oke, mungkin cukup yang dapat...
Baca selengkapnya

Aplikasi Coding Web Terbaik Gratis- Belajar Pemrograman Web

-
Gambar
Halo kawan, kalian pasti penasaran dengan pemrograman web, apa sih pemrograman web itu. sebelum masuk kesana pertama kita perlu mengenal dulu alat alat yang harus di gunakan untuk memulai mengkodekan program, karena ga mungkin kan kita ngebuat program tanpa sebuah aplikasi hehe  langsung aja,  berikut ini adalah aplikasi coding web kesukaan saya : 1. Brackets Brackets yaitu aplikasi  open-source (gratis dan bebas di gunakan)  yang dimulai oleh Adobe patut untuk dicoba. Aplikasi ini tersedia untuk Windows, Linux, dan Mac OS X. Brackets merupakan aplikasi  code editor  yang berfokus pada HTML, CSS, dan Javascript. selain aplikasi ini lumayan ringan, design ya pun simple dan terlihat seperti material design, mengapa saya sangat memfavoritkan aplikasi ini? aplikasi ini sangatlah responsif dan lancar, selain itu ada banyak fitur di dalam nya diantaranya kita dapat merubah tema Dark/ Light, enaknya aplikasi ini, saat kita akan mendeklarasikan sebuah perin...
Baca selengkapnya