All About Pemrograman

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>

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>

<tr>

ANGGAHEALTH HERBADRINK

</td>

</tr>

<tr>

<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>

<h1 style='color : blue; font: bold 16px Candara, Arial, Tahoma;'>Ayo Minum Susu</h1>

<p>

Nama Lengkap : <br>

</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>

</p>

<p>

Website : <br>

</p>

<p>

Produk Yang Disukai : <br>

<input type="checkbox" name="produk1" value="Susu Kambing">Susu Kambing<br>

</p>

<p>

Komentar : <br>

</p>

<p>

Kantor Cabang : <br>

</p>

<p>

</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>

</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>

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>

<tr>

ANGGAHEALTH HERBADRINK

</td>

</tr>

<tr>

<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>

<h1 style='color : blue; font: bold 16px Candara, Arial, Tahoma;'>Ayo Minum Susu</h1>

<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>

</p>

</td>

</tr>

</table>

</body>

</html>

Tampilan :

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

<html>

<head>

<title>Tugas 4 </title>

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>

<tr>

ANGGAHEALTH HERBADRINK

</td>

</tr>

<tr>

<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>

<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>

</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

Cari Blog Ini

All About Pemrograman

Komentar

Posting Komentar

Postingan populer dari blog ini

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

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

Aplikasi Coding Web Terbaik Gratis- Belajar Pemrograman Web