July 24, 2024

Part 2. Merancang Halaman Utama

2 min read

Pada kesempatan kali ini saya akan melanjutkan membuat sebuah sistem aplikasi untuk membantu mempermudah kinerja dan manajemen sebuah toko. Sistem aplikasi yang akan dibuat pada kesempatan kali ini adalah sistem berbasis web dengan menggunakan PHP & MySQL.  Tahapan ini adalah tahapan lanjutan setelah selesai merancang konsep database dan tabel yang dibutuhkan untuk menyimpan data penjualan dan pembelian suatu barang yang bisa digunakan pada minimarket atau toko.

Langkah 1

Gambar berikut ini adalah gambar konsep halaman utama dari website yang akan dirancang dengan menggunakan bahasa web yaitu HTML dan CSS. Untuk header boleh menggunakan gambar yang disesuaikan dengan nama toko atau minimarket anda masing-masing.

header1

Langkah 2

Buka web editor anda masing-masing, web editor bebas ingin menggunakan web editor apa saja. Pada kesempatan kali ini saya akan menggunakan Adobe Dreamweaver CS6. Buat folder untuk menampung masing-masing file yang akan dibutuhkan, folder ini akan menjadi sebuah kategori pengelompokan file atau dokumen.

header2

Langkah 3

Buat file code HTML untuk mendesain kerangka halaman utama dari website ini. Kerangka website bebas bentuknya seperti apa, dan saya akan memberikan contoh kerangka coding website seperti yang saya gambarkan pada Langkah 1. Simpan coding HTML dan letakan pada folder toko_dini disimpan dengan nama file index.php

[sourcecode]

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>:: Halaman Utama ::</title>

</head>

&nbsp;

<body>

<div id="pembungkus_web">

<div id="header"></div>

<div id="list">Welcome Aplikasi Penjualan dan Pembelian</div>

<div id="kolom">

<div id="sidebar">

<div class="menu">

<ul>

<li>Home</li>

<li>Data Supplier</li>

<li>Data Kategori</li>

<li>Data Produk</li>

<li>Transaksi Pembelian</li>

<li>Transaksi Penjualan</li>

<li>Laporan</li>

<li>Logout</li>

</ul>

</div>

</div>

<div id="content"></div>

</div>

<div id="footer">Template By Dini 2014</div>

</div>

</body>

</html>

[/sourcecode]

Langkah 4

Untuk mempercantik halaman utama dari website kita bisa menambahkan coding CSS pada halaman utama, jadi buka dokumen CSS pada Dreamweaver CS6 dan ikuti coding berikut ini. Jangan lupa untuk menyimpan coding CSS disimpan dalam folder CSS. File ini akan disimpan dengan nama style.css.

[sourcecode]
* {
margin:0 auto;
padding:0;
}
body {
background:#CFF;
font-family:Tahoma, Geneva, sans-serif; font-size:12px;
line-height:15px;
}
#pembungkus_web {
background:#FFF;
width:850px;
margin-top:10px;
}
#header {
background:url(../images/header.jpg) no-repeat;
width:850px;
height:245px;
}
#list {
background:#CCC;
width:850px;
height:22px;
text-align:center;
padding-top:8px;
}
#kolom {
width:850px;
margin-top:10px;
margin-bottom:10px;
}
#sidebar {
width:200px;
float:left;
}

.menu ul {
list-style:none;
line-height:200%;
border-bottom:dashed 1px #CCCCCC;
}
.menu ul li {
border-bottom:dashed 1px #CCCCCC;
}

.menu ul li a {
padding-left:10px;
text-decoration:none;
}
#content {
width:635px;
float:right;
border-left:solid 2px #CCCCCC;
padding-left:5px;
}
.bersih {
clear:both;
}
#footer {
background:#CCC;
width:850px;
height:22px;
text-align:center;
padding-top:8px;
}
[/sourcecode]

Langkah 5

Hubungkan halaman HTML dengan halaman CSS yang sudah dibuat pada Langkah 4 .

[sourcecode]

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>:: Halaman Utama ::</title>

<strong><link rel="stylesheet" type="text/css" href="css/style.css" /></strong>

</head>

[/sourcecode]

Bagian text yang berwarna merah adalah coding untuk menghubungkan antara HTML dengan CSS. Dimana style.css diperoleh dari folder CSS yang telah dibuat dan disimpan pada Langkah 4.

Langkah 6

Berikut adalah hasil halaman utama yang sudah dibuat desain dan coding dengan menggunakan HTML dan CSS. Lihat pada localhost masing-masing ya :).

header3

Sekali lagi yang harus diingat seluruh file disimpan dan dijalankan pada web server masing-masing. Selamat mencoba dan untuk selanjutnya kita akan membuat seluruh form yang akan dibutuhkan pada bagian Part 3 : Merancang Form untuk Aplikasi Pembelian dan Penjualan.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.