Desain Web Sederhana Untuk Pemula
Haloo, kali ini saya akan membagikan cara membuat desain web sederhana untuk pemula. Sebelumnya hal yang perlu teman-teman persiapkan yaitu:
1. Komputer / Laptop
2. Aplikasi untuk pembuatan desain program. Saat ini saya menggunakan Adobe Dreamweaver
3. Web browser untuk melihat hasil tampilan
Saat ini contoh program yang akan saya buat yaitu aplikasi toko buku. Dimana sub menu nya terdiri dari tabel
1. "Distributor", merupakan tabel yang nantinya berisi tentang data distributor yang masuk di toko
2. "Pasok", merupakan tabel yang nantinya berisi tentang berapa banyak buku yang di pasok
3. "Buku", merupakan tabel yang nantinya berisi tentang berapa banyak buku yang tersedia
4. "Kasir", merupakan tabel yang nantinya berisi tentang program penjualan.
5. "Laporan", merupakan tabel yang nantinya berisi tentang laporan penjualan buku.
6. "Logout", keluar / kembali ke halaman utama / home / beranda
Langsung saja saya mulai pembuatannya, langkah-langkahnya yaitu:
1. Program desain tampilan distributor. Tabel ini berisi kolom-kolom untuk diinputkan data. Untuk penaataan bentuk dan warna tabel saya memakai program ".css". Jadi nanti dibuat hiperlink. Dan untuk bagian headernya saya kasih gambar.
Buka aplikasi dreamweavernya, lalu ketikkan sintaknya sebagai berikut
Buka aplikasi dreamweavernya, lalu ketikkan sintaknya sebagai berikut
<htm>
<head>
<title>Green Bookstore</title>
<link href="desaincsskalian.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div id="canvas">
<div
id="header"></div>
<div
id="menu">
<ul>
<li
class="utama">Distributor</a>
<ul>
<li>Data Distributor</a></li>
<li>Arsip Distributor</a></li>
</ul>
</li>
<li
class="utama">Pasok</a>
<ul>
<li>Data
Pasok</a></li>
<li>Arsip Pasok</a></li>
</ul>
</li>
<li
class="utama">Buku</a>
<ul>
<li>Data Buku</a></li>
<li>Arsip Buku</a></li>
</ul>
</li>
<li class="utama">Kasir</a>
<ul>
<li>Data Kasir</a></li>
<li>Arsip Kasir</a></li>
</ul>
</li>
<li
class="utama">Laporan</a>
<ul>
<li>Lprn Distributor</a></li>
<li>Lprn Pasok</a></li>
<li>Lprn Buku</a></li>
<li>Lprn Kasir</a></li>
</ul>
</li>
<li
class="utama">Logout</a></li>
</ul>
</div>
<div
id="isi">
<div
id="content">
<center><h3>Data Distributor</h3></center>
<form method="post">
<table align="center">
<tr>
<td width="120px">ID <font
color="#FF0000" size="+2">*</font></td>
<td>:</td>
<td><input type="text"
name="id_distributor"
placeholder="ID Distributor"></td>
</tr>
<tr>
<td>Nama <font color="#FF0000"
size="+2">*</font></td>
<td>:</td>
<td><input type="text"
name="nama_distributor"
placeholder="Nama Distributor"></td>
</tr>
<tr>
<td>Alamat <font color="#FF0000"
size="+2">*</font></td>
<td>:</td>
<td><input type="text"
name="alamat"
placeholder="Alamat"></td>
</tr>
<tr>
<td>Telepon <font color="#FF0000"
size="+2">*</font></td>
<td>:</td>
<td><input type="text"
name="telepon"
placeholder="No Telepon"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit"
name="simpan" value="Simpan">
<input type="reset"
name="reset" value="Reset" /></td>
</tr>
</table>
</form>
<font color="#FF0000"
size="+2">*</font>Formulir yang Wajib Diisi !
</div>
</div>
<div
id="footer">
@CopyRight
2017
</div>
</div>
</body>
</html>
Setelah selesai, simpan hasil ketikan tersebut. Kemudian liat hasil tampilan dengan cara buka web browser. Pada bagian url ketikkan sesuai alamat tempat penyimpanan file yang sudah disimpan tadi. Kemudian Enter.
Berikut hasil tampilan inputnya
Berikut hasil tampilan inputnya
2. Yang selanjutnya yaitu program untuk tampilan hasil data yang sudah diinput, berikut sintaknya.
<body>
<h3><center>Arsip Data
Distributor Saat Ini</center></h3>
<font
color="#FFFFFF">
<table
width="100%">
<thead>
<tr>
<th >No</th>
<th >ID</th>
<th >Nama</th>
<th >Alamat</th>
<th >Telp.</th>
<th >Tindakan</th>
</tr>
</thead>
</table></font>
<br/>
</div>
</div>
<div id="footer">
@CopyRight 2017
</div>
</div>
</body>
Hasil tampilan outputnya
untuk membuat sub menu lainnya sintak sama dengan yang sebelumnya, tinggal di buat sesuai keinginan. Sekian info dari saya, semoga bermanfaat !! ^_^
sangat bermanfaat, ditunggu karya-karya selanjutnya
BalasHapus