Membuat Tampilan Layout Website Sederhana Dengan HTML Dan CSS

-

 



simpan : layout.php

<!DOCTYPE html> <html> <head> <title>TokoSepatu.com</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="bingkai"> <div class="header"> <h1>TokoSepatu.com</h1> <p>Website Toko Sepatu Masa Kini dan Trendy</p> </div> <div class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="sepatu.html">Sepatu</a></li> <li><a href="#">Sandal</a></li> <li><a href="#">Aksesoris</a></li> <li><a href="#">Kontak Kami</a></li> </ul> </div> <div class="badan"> <div class="sidebar"> sidebar <ul> <li><a href="#">Sepatu</a></li> <li><a href="#">Sandal</a></li> <li><a href="#">Aksesoris</a></li> <li><a href="#">Kontak Kami</a></li> </ul> </div> <div class="content"> content </div> </div> <div class="clear"></div> <div class="footer"> footer </div> </div> </body> </html>

selanjutnya buat sebuah file untuk script CSS

simpan : style.css

body{ background:#f4f4f4; } .bingkai{ background: #DDD; width: 900px; margin: 20px auto; border : #CCC solid 1px; } /*bagian header*/ .bingkai .header{ background: #ea3b16; /*height: 50px;*/ padding: 2px 10px; } /*akhir header*/ /*bagian menu*/ .bingkai .menu{ background: #eacd9a; width:100%; height:40px; } .bingkai .menu ul{ padding: 0; margin: 0; } .bingkai .menu ul li{ float: left; list-style: none; padding: 10px; } /*akhir menu*/ .clear{ clear: both; } .badan{ height: 450px; } /*bagian sidebar*/ .bingkai .badan .sidebar{ background: #FFF; float: left; width: 25%; height: 100%; } /*akhir sidebar*/ .bingkai .badan .content{ background: #f1f1f1; float: left; height: 100%; width: 75%; } .bingkai .footer{ width: 100%; padding: 10px; }

Simpan file style.css di folder yang sama. Coba jalankan file layout.php di browser anda, maka tampilannya akan seperti ini



Buat script baru sepatu.html, selanjutnya sisipkan script berikut ini pada tag <body>..</body>

<?php //panggil file koneksi.php yang sudah anda buat include "koneksi.php"; ?> <!doctype html public "-//W3C//DTD HTML 4.0 //EN"> <html> <head> <title>TokoSepatu.com</title> </head> <body> </body> </html>


Sisipkan script berikut ini :

<!doctype html public "-//W3C//DTD HTML 4.0 //EN"> <html> <head> <title>TokoSepatu.com</title> </head> <body> <form action="" method="post" enctype="multipart/form-data"> <table border="0" cellspacing="10" width="800" align="center"> <tbody> <center><h1>Input Produk</h1></center> <tr> <td>Nama Produk</td> <td>:</td> <td><input type="text" name="nama" placeholder="Nama Produk" size="50"

maxlength="30" autocomplete="off" autofocus/> </td> </tr> <tr> <td>Kategori Produk</td> <td>:</td> <td> <select name="kategori"> <option value="">Pilih Kategori</option> <option value="1">Pakaian Pria</option> <option value="2">Pakaian Wanita</option> <option value="3">Pakaian Anak</option> </select> </td> </tr> <tr> <td>Deskripsi Produk</td> <td>:</td> <td><textarea name="deskripsi" placeholder="Deskrippsi Produk" rows="3" cols="50"/></textarea></td> </tr> <tr> <td>Stok Produk</td> <td>:</td> <td><input type="text" name="stok" placeholder="Stok Produk" size="20" maxlength="10"/></td> </tr> <tr> <td>Berat Produk</td> <td>:</td> <td><input type="text" name="berat" placeholder="Berat Produk" size="30" maxlength="30"/></td> </tr> <tr> <td>Harga Produk</td> <td>:</td> <td><input type="text" name="harga" placeholder="Harga Produk" size="30" maxlength="30"/></td> </tr> <tr> <td>Diskon Produk</td> <td>:</td> <td><input type="text" name="diskon" placeholder="Diskon Produk" size="30" maxlength="10"/></td> </tr> <tr> <td colspan="3"><button type="submit" name="simpan">Proses Data</button</td> </tr> </tbody> </table> </form>

Simpan script tersebut yah, setelah anda menyimpan silahkan jalankan di browser anda. Hasilnya akan seperti ini

TUGAS INDIVIDU :
1. Buatlah script layout.php,style.css dan sepatu.html sehingga menampilkan output layout website sederhana.
2. Desainlah se-kreatif mungkin agar nilai kalian bertambah bagus.
3. Ubah Nama Website, Tema, dan Warna Website.
4. Hasil dari pengerjaan masing-masing di screenshoot kirim ke penugasan atau ke pesan.
5. Dikumpulkan terakhir hari ini sesuai jam KBM Mapel Produktif RPL.

*SELAMAT BELAJAR*


Comments

Post a Comment

Popular posts from this blog

Kode CRUD dalam satu File

-
Image
Tugas Selanjutnya !!! Silahkan buat database dengan nama :   crud_pplg,  Jika sudah, pada database   crud_pplg  kalian buat tabel   produk, Isi dengan stuktur seperti ini Kita sudah membuat tabelnya, sekarang kita akan membuat beberapa file PHP, diantara nya : Yang pertama akan kita buat yaitu  bikin folder  didalam  htdocs  kalian dengan nama  crud_pplg , lalu buat  koneksi.php  nya, perlu diketahui  koneksi.php  ini berfungsi untuk  menghubungkan PHP  kita dengan Databasenya MySQL Codingnya sebagai berikut : <?php $host = "localhost" ; $user = "root" ; $pass = "" ; $nama_db = "crud_pplg" ; //nama database $koneksi = mysqli_connect ( $host , $user , $pass , $nama_db ) ; //pastikan urutan nya seperti ini, jangan tertukar if ( ! $koneksi ) { //jika tidak terkoneksi maka akan tampil error die ( "Koneksi dengan database gagal: " . mysql_connect_error ( ) ) ; } ...
Read more

Kode CRUD dalam satu File - Lanjutan

-
Image
 Assalamualaikum Wr. Wb. Anak-anak silahkan dilanjutkan program kita yang kemarin 1. untuk tambah_produk.php <?php   include('koneksi.php'); //agar index terhubung dengan database, maka koneksi sebagai penghubung harus di include    ?> <!DOCTYPE html> <html>   <head>     <title>CRUD Produk dengan gambar - Gilacoding</title>     <style type="text/css">       * {         font-family: "Trebuchet MS";       }       h1 {         text-transform: uppercase;         color: salmon;       }     button {           background-color: salmon;           color: #fff;           padding: 10px;           text-decoration: none;           font-size: 12px;     ...
Read more

Membuat CRUD (Create, Read, Update, Delete) dengan PHP dan MYSQL - Menampilkan Data Dari Database

-
Image
Anak-anak persiapkan : 1. Membuat database dengan nama "Nama  Masing-Masing". 2. Buat sebuah tabel dengan nama  "User". 3. Column pada tabel usernya (id, nama, alamat, pekerjaan). Selanjutnya membuat koneksi.php <?php // isi nama host, username mysql, dan password mysql anda $host = mysql_connect ( "localhost" , "root" , "" ) ;   // isikan dengan nama database yang akan di hubungkan $db = mysql_select_db ( "Kelas Masing-Masing" ) ;   ?> Index.php < html > < head > < title > Membuat CRUD Dengan PHP Dan MySQL - Menampilkan data dari database < / title > < link rel = "stylesheet" type = "text/css" href = "style.css" > < / head > < body > < div class = "judul" > < h1 > Membuat CRUD Dengan PHP Dan MySQL < / h1 > < h2 > Menampilkan data dari database < / h2 > < h3 >Nama Masing-masing d...
Read more