Nama : Cindy aulia
Menggunakan Bahasa Pemograman HTML
Baiklah teman-teman di sini saya ingin memberikan tutorial cara membuat halaman web dengan menjualan buku-buku dengan menggunakan bahasa pemograman HTML banyak di antara kita menggunakan online shop untuk membeli beberapa perlengkapan sekolah atau kuliah jadi saya berinisiatif membuat halamn web untuk mempermudah teman-teman ketika ingin membeli buku dan membuat halaman web untuk penjualan buku-bukunya.
Di sini saya menggunakan bahsa pemograman yang mudah di pahami oleh teman-teman agar bisa di gunakan apabila teman-teman berniat membuat halaman web online shop.
Baiklah di sini saya akan memberikan tutorial agar teman-teman lebih memahami isi dan tata cara pembuatannya
Berikut adalah cara pembuatan halaman awal untuk tampilan yang akan di buka ketika teman-teman ingin membeli buku
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="file:///C:/Users/Documents/perpustkanan/css/Style.css">
<title>Perpustakaan Stim Sukma Medan</title>
</head>
<body>
<div id="container">
<div class="header"><center><img src="buku.jpg" width="900" height="400"></center>
<h1 align="center">WELCOME TO THE BOOKSTORE</h1>
<div class="main">
<h1 align="Left">
<h1 style="background-color:DodgerBlue;" align="center">Menu :</h1>
<h3 align="center"><a href="login.html">Login</a></h3>
<h3 align="center"><a href="home.html">Home</a></h3>
<h3 align="center"><a href="daftar buku.html">Daftar Buku</a>
</div>
</p>
</body></html>
hasil dari html di atas
Pada tampilan di atas kita akan masuk kedalam menu yang ada seperti membuat login
<html>
<head>
<title>Login Anggota</title>
<link rel="stylesheet" type="text/css" href="css/Login.css">
</head>
<body>
<form method="post" action="login_admin.php">
<div class="tampilan">
<div class="kepala">
<div class="logo"></div>
<h2 class="judul">Login Anggota</h2>
</div>
<div class="artikel">
<div class="kesalahan">
<?php
if(isset($_GET["login_error"])){
echo "Username atau password salah";
}
?>
</div>
<div class="kotak">
<p><input type="text" name="username" value="" placeholder="Masukan Username Anda"></p>
<p><input type="password" name="password" value="" placeholder="Masukan Password Anda"></p>
<p class="submit"><input type="submit" name="commit" value="Login"></p>
</form>
</div>
<p>Klik <a href="buku.html">link ini</a> untuk kembali kehalaman sebelumnya</p>
</body>
</html>
Berikut hasil dari tampilan menu login ketika pengguna ingin membuka login pada tampilan online shop buku kita
Setelah memasukkan username dan passwoad klik login dan serta klik link ini untuk kembali kehalam sebelumnya.
selanjutnya kita akan membuat halaman web baru dengan memberi notepad baru untuk membuat web home agar dapat memilih buku yang akan di beli
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Style.css">
<title>Perpustakaan Online</title>
</head>
<body>
<div id="container">
<h1 align="center">WELCOME TO THE BOOKSTORE</h1>
</div>
<h4>Selamat Datang</h4>
<div class="main">
<div class="left">
<h3 align="center">MENU</h3>
<ul>
</ul>
</div>
<div class="middle">
<h3 align="center">Artikel/Berita/Buku Terbaru</h3>
<h2 align="center">Buku: informatika </h2><br>
<div align="center">
<img src="Informatika.jpg" width="240" >
</div>
<h2 align="center">Buku: Pemasaran </h2><br>
<div align="center">
<img src="no5.jpg" width="240" >
</div>
<h2 align="center">Buku: Keuangan </h2><br>
<div align="center">
<img src="no10.jpg" width="240" >
</div>
<h2 align="center">Buku: pariwisata </h2><br>
<div align="center">
<img src="15.jpg" width="240" >
</div>
<h2 align="center">Buku: perkantoran </h2><br>
<div align="center">
<img src="1.jpg" width="240" >
</div>
<p><a href="informatika.html">Baca Selengkapnya >></a></p>
</div>
</body>
</html>
Berikut hasil dari tampilan yang telah kita buat
kita kan masuk kedalam harga serta buku yang akan kita jual dengan memberikan si pembeli melihat buku yang ingin di beli dengan mengklik baca selengkapnya>> maka kita membuat halam web baru agar dapat di buka
<html>
<head>
<title>informatika</title>
</head>
<body>
<table align="center">
<tr>
<td><class="buku">
<class="foto">
<img src="informatika.jpg" width="150" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="no1.jpg" width="150" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="NO2.jpg" width="200" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="NO3.jpg" width="150" height="205">
</td>
<td><class="buku">
<class="foto">
<img src="no4.jpg" width="150" height="205">
</td>
</tr>
<tr align="center">
<td>RP 50.000</td>
<td>RP 100.000</td>
<td>RP 150.000</td>
<td>RP 200.000</td>
<td>RP. 250.000</td>
</tr>
</table>
<br><br><br><br><br>
<table align="center">
<tr>
<td><class="buku">
<class="foto">
<img src="no5.jpg" width="150" height="205">
</td>
<td><class="buku">
<class="foto">
<img src="no6.jpg" width="150" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="no7.jpg" width="150" height="205">
</td>
<td><class="buku">
<class="foto">
<img src="no8.jpg" width="150" height="205">
</td>
<td><class="buku">
<class="foto">
<img src="no9.jpg" width="150" height="205">
</td>
<tr align="center">
<td>RP 300.000</td>
<td>RP 350.000</td>
<td>RP 400.000</td>
<td>RP 450.000</td>
<td>RP. 500.000</td>
</tr>
</table>
<br><br><br><br><br>
<table align="center">
<tr>
<td><class="buku">
<class="foto">
<img src="no10.jpg" width= 150" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="no11.jpg" width="200" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="no12.jpg" width="150" height="205">
</td>
<td><class="buku">
<class="foto">
<img src="no13.jpg" width="150" height="205">
</td>
<td><class="buku">
<class="foto">
<img src="no14.jpg" width="200" height="205">
</td>
<tr align="center">
<td>RP 30.000</td>
<td>RP 35.000</td>
<td>RP 40.000</td>
<td>RP 45.000</td>
<td>RP 50.000</td>
</tr>
</table>
<br><br><br><br><br>
<table align="center">
<tr>
<td><class="buku">
<class="foto">
<img src="15.jpg" width= 150" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="16.jpg" width="200" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="17.jpg" width="150" height="205">
</td>
<td><class="buku">
<class="foto">
<img src="18.jpg" width="150" height="205">
</td>
<td><class="buku">
<class="foto">
<img src="19.jpg" width="200" height="205">
</td>
<tr align="center">
<td>RP 52.000</td>
<td>RP 37.000</td>
<td>RP 80.000</td>
<td>RP 95.000</td>
<td>RP 37.000</td>
</tr>
</table>
<br><br><br><br><br>
<table align="center">
<tr>
<td><class="buku">
<class="foto">
<img src="1.jpg" width= 150" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="2.jpg" width="200" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="3.jpg" width="150" height="205">
</td>
<td><class="buku">
<class="foto">
<img src="4.jpg" width="150" height="205">
</td>
<td><class="buku">
<class="foto">
<img src="5.jpg" width="200" height="205">
</td>
<tr align="center">
<td>RP 62.000</td>
<td>RP 77.000</td>
<td>RP 90.000</td>
<td>RP 45.000</td>
<td>RP 57.000</td>
</tr>
</table>
<br><br><br><br><br>
<p>Klik <a href="buku.html">link ini</a> untuk kembali kehalaman sebelumnya</p>
</body>
</html>
Berikut hasil dari html di atas
Saya juga menyertakan halaman yang akan kembali kepada tampilan awal dengan mengklik link ini untuk kembalikehalam sebelumnya agar teman-teman yang ingin membeli bisa kembali ketampilan awal
Selanjutnya kita akan membuat menu daftar buku apa saja yang kita jual agar pembeli jelas apa yang ingin di beli di online shop buku kita
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Style.css">
<title>Perpustakaan Online</title>
</head>
<body>
<div class="middle2">
<h2 align="center">DAFTAR BUKU</h2><br>
<div align="center">
</div>
<table align="center">
<tr>
<td><class="buku">
<class="foto">
<img src="informatika.jpg" width="150" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="no5.jpg" width="150" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="no10.jpg" width= 150" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="15.jpg" width= 150" height="200">
</td>
<td><class="buku">
<class="foto">
<img src="1.jpg" width= 150" height="200">
</td>
</tr>
</table>
<p>Klik <a href="buku.html">link ini</a> untuk kembali kehalaman sebelumnya</p>
<p><div class="footer"><p align="center"> @ Cindy aulia </p>
</div>
</p>
Dan hasil tampilannya akan seperti ini
Dalam setiap gambar yang ada harus memasukkannya kedalam 1 file agar gambar yang kita inginkan akan terbaca oleh bahasa pemograman yang kita buat dan apabila gambar tidak didalam 1 file maka web tidak akan terbaca dan dalam penyimpanan gambar kita juga harus sama misalnya gambar1.jpg dan di simpan dalam bentuk jual buku.html atau nama file yang teman-teman inginkan.
Baiklah hanya itu yang bisa saya sampaikan semoga bermanfaat dan dapat dilaksanakan bagi teman-teman yang ingin belajar kurang dan lebih mari sama-sama kita belajar
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Komentar
Posting Komentar