Scribd
Upload
17 views44 pages

Bab Iv

Uploaded by

Giardi Af
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views44 pages

Bab Iv

Uploaded by

Giardi Af
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 44

BAB IV

RANCANGAN APLIKASI
4.1 Proses Pembuatan Website Toko Online

4.1.1 Index Html

<html>

<body>

<script>

alert("Selamat datang di toko kami.");

</script>

</body>

</html>

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

<title>JUAL COMPUTER</title>

<link rel="stylesheet" href="css/tampilan.css">

</head>

Page
28
<body>

<div class="badan-utama"><body background="v.jpg" STYLE="background-


REPEAT:NO-REPEAT;background-SIZE:100% 100%;">

<header>

<center><h2>Jual Komputer ‫<متجر على االنترنت‬/h2></center>

<p><center><marquee scrollamount="10" width="400">Online untuk kita


semua</marquee></center></p>

</center>

</header>

<nav class="navigasi">

<ul>

<li><a class="active" href="login.html">Home</a></li>

<li><a href="menu.html">Menu</a></li>

<li><a href="propil.html">profil</a></li>

<li><a href="toko.html">toko</a></li>

</ul>

</nav>

Page
29
<div class="banner">

<img src="c.jpg" alt="Computer">

</div>

<div class="menu-kiri">

<div class="kotak">

<h3>Pemesanan</h3>

<p>

Isi Form Pemesanan dengan Klik Tombol di bawah ini

</p>

<a href="pesan.html"><img src="gam.webp" alt="alat komputer"></a>

</div>

</div>

<div class="menu-tengah">

<div class="kotak">

<h3>Odla Komputer</h3>

<span class="tanggal-posting">

Diposting pada 09.04 WIB, 30 januari 2023

</span>

Page
30
<img src="d.jpg" alt="COMPUTER">

<p>

</p>

<a class="tombol tombol-lengkap"


href="selengkapnya.html">Selengkapnya</a>

</div>

</div>

<div class="menu-kanan">

<div class="kotak">

<h3>Jadwal Buka</h3>

<img src="z.jpg" alt="COMPUTER">

<h4 align="center">Jadwal Buka</h4>

<center>

<p>Senin-Minggu 08.00 WIB - 22.00 WIB</p>

</center>

Page
31
</div>

<div class="kotak">

<h3>Berita Terbaru</h3>

<nav class="menu-artikel">

<ul>

<li><a href="monitor.html">jual monitor</a></li>

<li><a href="cpu.html">jual cpu</a></li>

<li><a href="mous.html">jual mous</a></li>

<li><a href="keyboar.html">jual keyboard</a></li>

</ul>

</nav>

</div>

</div>

<footer>

@copyright 2023 || by @aldosetiawan

</footer>

</div>

</body>

</html>

Page
32
4.1.2 Tampilan Index.Css

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: Arial, Helvetica, sans-serif;

body

background-color: gainsboro;

.badan-utama

max-width: 1080px;

margin: 20px auto;

background-color: ecf0f1;

padding: 15px;

overflow: hidden;

Page
33
}

header

background-color: a52a2a;

color: white;

padding: 20px;

header h2

margin-bottom: 7px;

font-size: 35px;

.navigasi ul

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color:e74c3c;

font-family: Arial, Helvetica, sans-serif;

font-size: 20px;

font-weight: bold;

Page
34
}

.navigasi li

float: left;

.navigasi li a

display: block;

color: white;

text-align: center;

padding: 10px 20px;

text-decoration: none;

.navigasi li a:hover

background-color:black;

transition-duration: 2s;

.banner

Page
35
{

margin-bottom: 15px;

.banner img

display: block;

width: 100%;

height: 330px;

.kotak

border: 1px solid gainsboro;

padding: 10px;

margin-bottom: 15px;

.kotak h3

Page
36
{

background-color: crimson;

color: white;

text-align: center;

padding: 10px;

margin-bottom: 13px;

.kotak img

display: block;

width: 100%;

margin-bottom: 10px;

.kotak p

margin-bottom: 10px;

.menu-kiri

Page
37
{

width: 250px;

margin-right: 10px;

float: left;

.menu-tengah

width: 530px;

margin-right: 10px;

float: left;

.menu-tengah h3

background: none;

color: crimson;

margin-bottom: 0;

.tanggal-posting

Page
38
{

color: gray;

text-align: right;

font-size: 12px;

margin-bottom: 10px;

display: block;

.tombol

display: block;

text-decoration: none;

padding: 10px;

width: 120px;

color: white;

border-radius: 5px;

text-align: center;

.tombol:hover

Page
39
{

background-color: black;

transition-duration: 2s;

.tombol-pesan

background-color: green;

.tombol-lengkap

background-color: darkorange;

.menu-kanan

width: 250px;

float: left;

Page
40
.menu-kanan, .menu-kiri, .menu-tengah

margin-bottom: 15px;

footer

clear: both;

background-color: crimson;

color: white;

padding: 15px;

text-align: center;

.menu-artikel ul

list-style-type: none;

.menu-artikel ul li a

Page
41
{

text-decoration: none;

display: block;

padding: 13px;

border-bottom: 1px solid gainsboro;

margin-bottom: 12px;

color: black;

.menu-artikel ul li a:hover

color: darkorange;

border-bottom: 5px double chocolate;

transition-duration: 2s;

/*untuk tablet*/

@media screen and (max-width:1080px)

.badan-utama

Page
42
{

width: 100%;

.menu-kiri

width: 25%;

.menu-tengah

width: 68%;

float: right;

.menu-kanan

clear: both;

float: none;

width: 100%;

Page
43
/*untuk android*/

@media screen and (max-width:780px)

header h2, header p

text-align: center;

.menu-kiri, .menu-kanan, .menu-tengah

float: none;

width: 100%;

.navigasi li

float: none;

Page
44
4.1.3 Login.Html

<!DOCTYPE HTML>

<html>

<head>

<title>Login</title>

<link rel="stylesheet" href="css1/style.css">

</head>

<body>

<div class="container">

<h1><center>Login</center></h1>

<form action="aldosetiawan.html" method="POST">

<form>

<label>Username</label><br>

<input type="text"><br>

<label>Password</label><br>

<input type="password"><br>

<button>Log in</button>

</form>

</div>

</body>

</html>

Page
45
4.1.4 Style.Css

*{

margin: 0;

padding: 0;

outline: 0;

font-family: 'Open Sans', time new roman;

body{

height: 100vh;

background-image: url(v.jpg);

background-size: cover;

background-position: center;

background-repeat: no-repeat;

.container{

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

padding: 20px 25px;

Page
46
width: 300px;

background-color: rgba(0,0,0,.7);

box-shadow: 0 0 10px rgba(255,255,255,.3);

.container h1{

text-align: left;

color: #fafafa;

margin-bottom: 30px;

text-transform: uppercase;

border-bottom: 4px solid #2979ff;

.container label{

text-align: left;

color: #90caf9;

.container form input{

width: calc(100% - 20px);

padding: 8px 10px;

Page
47
margin-bottom: 15px;

border: none;

background-color: transparent;

border-bottom: 2px solid #2979ff;

color: #fff;

font-size: 20px;

.container form button{

width: 100%;

padding: 5px 0;

border: none;

background-color:#2979ff;

font-size: 18px;

color: #fafafa;

Page
48
4.1.5 Pesan.Html

<!DOCTYPE html>

<html lang="en">

<head>

<title>JUAL COMPUTER</title>

</head>

<body background="w.jpg" STYLE="background-REPEAT:NO-


REPEAT;background-SIZE:100% 250%;">

<body>

<center><h1>PESANAN</h1></center>

<p>

<center><a href="aldosetiawan.html"><img src="5.gif"


width="95" height="95"></a></center>

</p>

<hr>

<p>

<div class="menu-kanan">

Page
49
<div class="kotak">

<br>

<center><a href="https://wa.me/085878262990?text=Isi Pesan"><img


src="wa.gif" alt="alat komputer"></a></center>

</div>

</div>

</p>

<hr>

</body>

</html>

Page
50
4.1.6 Menu.Html

<!DOCTYPE html>

<html lang="en">

<head>

<title>JUAL COMPUTER</title>

</head>

<body background="w.jpg" STYLE="background-REPEAT:NO-


REPEAT;background-SIZE:100% 500%;">

<body>

<center><h1>Menu</h1></center>

<p>

<center><a href="aldosetiawan.html"><img src="5.gif" width="95"


height="95"></a></center>

</p>

<hr>

<p>

<center><h2>SELAMAT DATANG DI TOKO KAMI</h2></center>

<br>

<center>kamu bisa membeli berbagai peralatan komputer seperti mouse,


keyboard DLL</center>

</p>

<hr>

</body>

</html>

Page
51
4.1.7 Profil.Html

<html>

<head>

<title> JUAL COMPUTER </title>

</head>

<body background="w.jpg" STYLE="background-REPEAT:NO-REPEAT;background-


SIZE:100% 100%;">

<body>

<center><h1>PROFIL PRIBADI</h1></center>

<p>

<center><a href="aldosetiawan.html"><img src="5.gif" width="95"


height="95"></a></center>

</p>

<div id="wrapper">

<center><div class="titleprofile">PROFIL SAYA</div></center>

<div class="photoprofile">

<center><img src="poto.jpg" width="300"


height="450"></a></center></img></center>

</div>

Page
52
<center><div class="dataprofile">Nama : Aldo Setiawan<br>Alamat : Muncang,
Sodonghilir, Tasikmalaya<br>Sekolah : SMK Almukhtara<br>Tanggal Lahir :
Tasikmalaya 21 Januari 2005<br>No.Telepon : 085214025982 <br>Sosial
Media<br>Facebook : Aldo setiawan<br>instagram : aldosetiawan<br>E-mail :
[email protected]</div></center>

</div>

</body>

</html>

4.1.8 Toko.Html

<!DOCTYPE html>

<html lang="en">

<head>

<title>JUAL COMPUTER</title>

</head>

<body background="w.jpg" STYLE="background-REPEAT:NO-


REPEAT;background-SIZE:100% 100%;">

<body>

<center><h1>TOKO ODLA COMPUTER</h1></center>

Page
53
<p>

<center><a href="aldosetiawan.html"><img src="5.gif"


width="95" height="95"></a></center>

</p>

<hr>

<p>

<center><h4>Toko kami Menyediakan berbagai alat komputer


seperti</h4>

<br><h2>Monitor</h2>

<img src="1.png" width="300" height="220">

<br><h2>Mouse</h2>

<img src="d.png" width="300" height="300">

<br><h2>Cpu</h2>

<img src="f.png" width="300" height="300"></center>

</p>

<hr>

</body>

</html>

Page
54
4.1.9 Monitor.Html

<!DOCTYPE html>

<html lang="en">

<head>

<title>JUAL COMPUTER</title>

</head>

<body background="w.jpg" STYLE="background-REPEAT:NO-


REPEAT;background-SIZE:100% 250%;">

<body>

<center><h1>Jenis monitor</h1></center>

<hr>

<center><a href="aldosetiawan.html"><img src="5.gif" width="95"


height="95"></a></center>

<p>

<div class="menu-kanan">

<div class="kotak">

<center><h3>Berbagai Jenis Monitor</h3></center>

<br>

<center><img src="oo.jpg" width="300" height="300">

<img src="ii.jpg" width="300" height="300">

Page
55
<img src="pp.jpg" width="300" height="300"></center>

</div>

</div>

</p>

<hr>

</body>

</html>

4.1.10 Mouse.Html

<!DOCTYPE html>

<html lang="en">

<head>

<title>JUAL COMPUTER</title>

</head>

<body background="w.jpg" STYLE="background-REPEAT:NO-


REPEAT;background-SIZE:100% 250%;">

<body>

<center><h1>Jenis Mouse</h1></center>

<p>

Page
56
<center><a href="aldosetiawan.html"><img src="5.gif" width="95"
height="95"></a></center>

</p>

<hr>

<p>

<div class="menu-kanan">

<div class="kotak">

<center><h3>Berbagai Jenis Mouse</h3></center>

<br>

<center><img src="55.jpg"width="300" height="300">

<img src="66.jpg" width="300" height="300">

<img src="77.jpeg" width="300" height="300"></center>

</div>

</div>

</p>

<hr>

</body>

</html>

Page
57
4.1.11 Cpu.Html

<!DOCTYPE html>

<html lang="en">

<head>

<title>JUAL COMPUTER</title>

</head>

<body background="w.jpg" STYLE="background-REPEAT:NO-


REPEAT;background-SIZE:100% 250%;">

<body>

<center><h1>Jenis CPU</h1></center>

<p>

<center><a href="aldosetiawan.html"><img src="5.gif"


width="95" height="95"></a></center>

</p>

<hr>

<p>

<div class="menu-kanan">

<div class="kotak">

<center><h3>Berbagai Jenis cpu</h3></center>

<br>

Page
58
<center><img src="mm.jpg"width="300" height="300">

<img src="nn.jpg" width="300" height="300">

<img src="bb.jpg" width="300" height="300"></center>

</div>

</div>

</p>

<hr>

</body>

</html>

4.1.12 Keyboard.Html

<!DOCTYPE html>

<html lang="en">

<head>

<title>JUAL COMPUTER</title>

</head>

<body background="w.jpg" STYLE="background-REPEAT:NO-REPEAT;background-


SIZE:100% 250%;">

<body>

Page
59
<center><h1>Jenis keyboard</h1></center>

<p>

<center><a href="aldosetiawan.html"><img src="5.gif" width="95"


height="95"></a></center>

</p>

<hr>

<p>

<div class="menu-kanan">

<div class="kotak">

<center><h3>Berbagai Jenis keyboard</h3></center>

<br>

<center><img src="88.jpg"width="300" height="300">

<img src="rr.jpg" width="300" height="300">

<img src="22.jpg" width="300" height="300"></center>

</div>

</div>

</p>

<hr>

</body>

</html>

Page
60
4.1.13 Selengkapnya.Html

<!DOCTYPE html>

<html lang="en">

<head>

<title>JUAL COMPUTER</title>

</head>

<body background="7.gif" STYLE="background-REPEAT:NO-REPEAT;background-


SIZE:100% 100%;">

<body>

<center><h1>ODLA COMPUTER</h1></center>

<p>

<center><img src="g.gif" width="500" height="350"></a></center>

</p>

<hr>

<p>

<center><h2>COMPUTER</h2></center>

<br>

<center>

Page
61
Teknologi dapat memudahkan pekerjaan manusia.

Salah satunya adalah komputer yang Anda nikmati hingga saat ini.

Kecanggihan yang dimiliki, membuatnya seolah-olah tidak bisa dipisahkan dalam


kehidupan sehari-hari.Pengertian Komputer

Pada awalnya, istilah komputer merupakan julukan seseorang yang ahli di bidang
aritmatika (baik menggunakan alat hitung ataupun tidak).

Barulah pada tahun 1897, komputer adalah perangkat mesin yang digunakan
sebagai alat hitung.

Hal tersebut terus mengalami pergeseran hingga sekarang komputer dimaknai


sebagai seperangkat elektronik yang terdiri dari beberapa komponen.

Yang satu dengan lainnya saling bekerjasama untuk menghasilkan sebuah


informasi berdasarkan data, prosedur dan program yang sudah dirumuskan.

Donald H. Saders mendefinisikan sebagai sebuah sistem elektronik yang bisa


memanipulasi data secara cepat dan tepat.

Diorganisasikan dan dirancang secara otomatis. Yang berfungsi menerima dan


menyimpan data.

Kemudian diproses dan menghasilkan sebuah output berdasarkan instruksi-


instruksi yang ada dalam memory.

<br>Sedangkan menurut Larry dan Nancy Long yaitu alat elektronik yang
digunakan untuk menghitung serta mampu melaksanakan dan
menginterpretasikan perintah

Diantaranya adalah input, output, operasi logik, dan perhitungan lain-lain.

Menurut VC Hamazer ZG komputer yaitu sebuah mesin penghitung elektronik.

Page
62
Yang mana, keberadaannya, mampu dengan cepat menerima informasi input
digital. Memproses sesuai program yang diminta dan tersimpan dalam memory.
Hingga pada akhirnya, menampilkan sebuah informasi.

William Sawyer juga ikut mendefinisikan yaitu sebuah mesin multiguna. Dapat
diprogram dan menerima data (baik berupa gambar ataupun fakta).

Kemudian diproses dan dimanipulasi hingga keluar sebuah informasi yang bisa
digunakan oleh manusia.

Kesimpulannya komputer yaitu seperangkat elektronik yang mampu melakukan


serangkaian tugas.

Seperti menerima input, kemudian memprosesnya sesuai dengan perintah atau


instruksi yang diberikan. Output yang dikeluarkan berupa informasi.

Jika Anda ingin mengetahui bagaimana sejarah komputer lengkap. Penjelasan di


bawah ini bisa membantu Anda.

Sejarah Perkembangan Komputer

Komputer mengalami pembaharuan dari tahun ke tahun. Yang mana pertama


kali muncul belum terliat seperti saat ini yang Anda gunakan.

Melainkan, benar-benar seperti mesin penghitung. Fungsinya juga sangat


sederhana, hanya sebagai alat pembantu perhitungan matematika.

Kemudian beberapa pakar menemukan rumus, kode perintah, pemrograman,


dan memori perintah. Sebagaimana saat ini Anda gunakan.

Oleh karena itu, setelah mengetahui pengertian komputer. Anda juga harus
paham bagaimana perkembangan dan asal-usulnya.

Sejarah komputer generasi pertama yang dikenal dengan Electronic Numerical


Integrator and Calculator) yaitu sebuah alat digital elektronik.

</center>

Page
63
</p>

<hr>

<CENTER><a href="aldosetiawan.html"><img src="5.gif" width="90"


height="90"></a><CENTER>

</body>

</html>

4.2 Tampilan Rancangan Hasil pembuatan Toko Online

4.2.1 Tampilan Index.Html

Gambar 4.1 tampilan Index Saat Dijalankan

Page
64
4.2.2 Tampilan Login.html

Gambar 4.2 tampilan Login Saat Dijalankan

4.2.3 Tampilan Menu.html

Gambar 4.3 tampilan Menu Saat Dijalankan

Page
65
4.2.4 Tampilan Profil.html

Gambar 4.4 tampilan Profil Saat Dijalankan

4.2.5 Tampilan Toko.html

Gambar 4.5 tampilan Toko Saat Dijalankan

Page
66
4.2.6 Tampilan Pesan.html

Gambar 4.6 tampilan Pesan Saat Dijalankan

4.2.7 Tampilan Monitor.Html

Gambar 4.7 tampilan Monitor Saat Dijalankan

Page
67
4.2.8 Tampilan Mouse.html

Gambar 4.8 tampilan Mouse Saat Dijalankan

4.2.9 Tampilan Cpu.html

Gambar 4.9 tampilan Cpu Saat Dijalankan

Page
68
4.2.10 Tampilan Keyboard.html

Gambar 4.10 tampilan Keyboard Saat Dijalankan

4.2.11 Tampilan Selengkapnya.html

Gambar 4.11 tampilan selengkapnya Saat Dijalankan

Page
69
4.3 Proses Perancangan ERD
1) Identifikasi entitas dan atribut pada ERD
No Nama Entitas Atribut
1 Login Id, password, ussername
2 Penjual Id_Penjual, Nama_Penjual, Email,
No_Telepon, Alamat
3 Pembeli Id_Pembeli, Nama_Pembeli, Alamat
Pembeli, No_Telepon
4 Barang Id_Barang, Nama_Barang, Harga_Barang,
Stok_Barang
5 Distributor / Id_suplier, alamat, nama
Suplierr
Tabel 4.1 Identifikasi Entitas

2) ERD Toko Online Humairra Comp

Page
70
Gamabar 4.12 Tampilan Rancangan ERD

Page
71

You might also like