Scribd
Unggah
28 tayangan49 halaman

Bab 2 - CSS

Dokumen tersebut membahas tentang CSS (Cascading Style Sheets) yang berfungsi untuk mengontrol tampilan halaman website dengan menggunakan selector, declarations, dan properties. Dokumen tersebut menjelaskan struktur dasar CSS, penulisan CSS, penempatan CSS, dan beberapa properties dasar CSS seperti background, margin, padding, height/width, dan text.

Diunggah oleh

fahmirifki412
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
28 tayangan49 halaman

Bab 2 - CSS

Dokumen tersebut membahas tentang CSS (Cascading Style Sheets) yang berfungsi untuk mengontrol tampilan halaman website dengan menggunakan selector, declarations, dan properties. Dokumen tersebut menjelaskan struktur dasar CSS, penulisan CSS, penempatan CSS, dan beberapa properties dasar CSS seperti background, margin, padding, height/width, dan text.

Diunggah oleh

fahmirifki412
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 49

PERTEMUAN II – CSS

Pratikan akan mempelajari tentang dasar – dasar CSS. Kemudian dilanjutkan dengan membuat
halaman Web menggunakan CSS. Tujuan setelah mempelajari Bab ini adalah :
1. Mampu memahami struktur dasar CSS.
2. Mampu memahami dasar – dasar CSS.
3. Dapat menghubungkan antara HTML dengan CSS.

A. Pengertian
CSS adalah kepanjangan dari Cascading Style Sheets, yang berfungsi untuk mengontrol
tampilan dari sebuah halaman website. Dengan menggunakan CSS, cukup satu kode untuk
semua mark up yang sama pada tag HTML.

B. Struktur
1. Penulisan CSS
Penulisan dari CSS berbeda dengan HTML. Apabila HTML menggunakan tag dan
attribute, maka CSS menggunakan selector, dimana selector memiliki declarations.
Declarations memiliki properties value. Penulisan CSS ini ada yang diselipkan di dalam
dokumen HTML ada juga yang berupa file tersendiri yang dapat diakses oleh HTML.
Secara garis besar anatomi dari aturan CSS adalah sebagai berikut:

1
Lab. Pemrograman Komputer ITN Malang 2024
2. Selectors
CSS Selector digunakan untuk menemukan atau memilih nama element, id, class,
attribute dan lainnya di dalam halaman HTML.
a. Element / Tag
Memilih element atau tag sesuai dengan nama tag yang ada pada halaman HTML.
p {
color: blue;
text-align: center;
}

b. Id
Menggunkan atribut id pada tag HTML untuk pemanggilannya. Biasanya
digunakan untuk tag / element yang memiliki style sendiri. Untuk penulisannya
menggunakan tanda pagar (#) kemudian nama idnya. Penerapannya pada HTML
tag / element menggunakan attribut id=”nama_selector_id”.
#coba1 {
text-align: center;
color: blue;
}

c. Class
Memilih element dengan atribut class yang spesifik. Untuk memilih element atau
tag yang spesifik, dengan menulis nama element kemudian diikuti dengan tanda
titik(.) dan dilanjutkan dengan nama class yang dideklarasikan.
Bentuk Class Umum :
.kelas {
text-align: center;
color: blue;
}

Bentuk Class Spesifik untuk element / tag :


p.center {
text-align: center;
color: blue;
}

2
Lab. Pemrograman Komputer ITN Malang 2024
d. Grouping
Penggabungan beberapa element / tag, yang memiliki property dan value yang
sama sehingga meringkas penulisan syntax, untuk melakukan grouping hal yang
harus diperhatikan adalah tanda “,” pada selector sebagai pemisah tag – tag /
element.
Bentuk sebelum Grouping :
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}

Bentuk sesudah Grouping :


h1, h2, p {
text-align: center;
color: blue;
}

3. Comment
Comment digunakan untuk mendeskripsikan syntax yang ada pada css, dan akan
diabaikan oleb browser. Penerapannya menggunakan /*.....*/, ini berlaku untuk satu
baris maupun lebih.
P {
color: blue;
/* This is a single-line comment */
text-align: center;
}

3
Lab. Pemrograman Komputer ITN Malang 2024
C. Penempatan CSS
1. External Style Sheet
Penempatan css pada satu file css, file css tersebut dibuat dengan ekstensi .css yang
kemudian dipanggil menggunakan element link pada HTML.
<head>
<link rel="stylesheet" type="text/css" href="cobastyle.css">
</head>

2. Internal Style Sheet


Penempatan css berada didalam file HTML. Untuk mendeklarasikan css ini kita
menggunakan tag <style>. Biasanya digunakan jika file HTML itu memiliki style
tersendiri dan berbeda dengan style css halaman HTML yang lain.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>

3. Inline Style
Penempatan style sheet langsung pada tag – tag HTML. Untuk mendeklarasikan css
ini kita menggunakan atribut style pada tag HTML. Biasanya digunakan jika kita ingin
membuat style sendiri untuk satu tag di dalam HTML.
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

D. Properties Dasar CSS


1. Background Color
Terdapat 3 cara untuk pewarnaan style dalam CSS, yaitu Valid Color Name, RGB dan
Hexadecimal Value.

4
Lab. Pemrograman Komputer ITN Malang 2024
Contoh Valid Color Name :
<!DOCTYPE html>
<html>
<body>
<p style="background-color:blue;"> warna biru</p>
<p style="background-color:green;"> warna hijau</p>
<p style="background-color:yellow;"> warna kuning</p>
</body>
</html>

Hasil :

Contoh RGB :
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 99, 71);">
rgb(255, 99, 71)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">
rgba(255, 99, 71, 0.5)</h1>
</body>
</html>

Hasil :

Contoh Hexadecimal :
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>

5
Lab. Pemrograman Komputer ITN Malang 2024
</body>
</html>

Hasil :

2. Background
Digunakan untuk mengatur style background suatu tag / element.
Terdiri dari beberapa properties diantaranya :
a. backgroud-color
b. backgroud-image
c. backgroud-repeat
d. backgroud-attachment
e. backgroud-position
Syntax CSS Background :
body {
background-color: lightblue;
background-image: url("...");
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
/* ----------------------- */
background:#ffffff url("...") no-repeat right top;
}

3. Margin
Margin digunakan untuk mengatur jarak antara element pada HTML. Untuk valuenya
dapat menggunakan auto, px, % dan lainnya.
- Auto digunakan untuk mengatur secara otomatis.
- Px untuk mengatur ukuran sesuai dengan kemauan sendiri.
- % mengatur jarak menggunakan persern misal 30%.

6
Lab. Pemrograman Komputer ITN Malang 2024
Contoh margin :
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
/* ----------------------- */
margin: 100px 150px 100px 80px;
margin: auto;
margin: 100px 150px;
margin: 100px 150px;
}

4. Padding
Digunakan untuk mengatur space element content dan element border pada HTML,
maksudnya adalah mengatur jarak suatu element yang terdapat didalam element kepala.
Untuk valuenya dapat menggunkan px, % dan lainnya.
- Px untuk mengatur ukuran sesuai dengan kemauan sendiri.
- % mengatur jarak menggunakan persern misal 30 %.
Contoh Padding :
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
/* ----------------------- */
padding: 50px 30px 50px 80px;
}

5. Height / Witdh
Height untuk mengatur tingi suatu style, sedangkan Witdh digunakan untuk mengatur
lebar suatu style, biasa digunakan pada tag layout <div> untuk mengatur ukuran.
Contoh Height / Witdh :
div {
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}

7
Lab. Pemrograman Komputer ITN Malang 2024
6. Text
Pada CSS Text kita dapat mengatur style mulai dari warna text, aligment, case text,
Indent Text, jarak kata, arah text, jarak antar line, jarak antar huruf dan underline.
Contoh CSS Text :
p {
color: green;
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-indent: 50px;
word-spacing: -5px;
direction: rtl;
line-height: 1.8;
letter-spacing: 3px;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
text-decoration: none;
}

7. Font
Mendefinisikan font family, ketebalan, ukuran dan style dari sebuah text pada tag HTML.
a. Font-family : menetapkan jenis font yang akan diterapkan pada target
b. Font-size : menentukan ukuran pada teks
c. Font-weight : menentukan ketebalan pada teks
d. Font-style : menetapkan styling yang diterapkan pada teks
Contoh CSS Font :
p {
/*font face*/
font-family: "Times New Roman", Times, serif;

/*font sizing*/
font-size: 40px;
font-size: 2.5em; /* 40px/16=2.5em */
font-size: 100%;

/*bold*/
font-weight: normal;
font-weight: bold;

/*font style*/

8
Lab. Pemrograman Komputer ITN Malang 2024
font-style: normal;
font-style: italic;
font-style: oblique;
}

8. Border
CSS border adalah salah satu properti CSS yang digunakan untuk menambahkan garis
tepi pada elemen HTML. Properti ini memungkinkan kita untuk mengatur tampilan garis
tepi dengan cara menentukan warna, ketebalan, jenis garis, serta style border (solid, dotted,
dashed, dan lain-lain). Kita juga dapat menggunakan properti border-top, border-right,
border-bottom, dan border-left untuk menentukan tampilan border pada masing-masing sisi
elemen.
Source code:
div {
border: 1px solid black;
}

div {
border-top: 2px dashed blue;
border-right: 1px solid green;
border-bottom: 3px dotted yellow;
border-left: 2px solid pink;
}

9. Floating
Floating dapat membuat elemen berada pada sebelah kanan atau kiri. Float merupakan
salah satu teknik dalam membuat layout website. Nilai dari attribute float ada 2 yaitu : left
dan right.
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 800px;

9
Lab. Pemrograman Komputer ITN Malang 2024
border: 2px solid black;
margin: 20px auto;
}

img {
float: left;
}
.clear {
clear: left;
}
</style>
</head>
<body>
<div class="container">
<img src="img/RPL.png" alt="" width="200px" />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non
nisi
aspernatur mollitia dolor dolores libero expedita sed nobis neque
temporibus eos ipsam, dolorem nulla quibusdam ipsa optio sunt,
voluptatum rem? Lorem ipsum dolor sit, amet consectetur
adipisicing
elit. Nesciunt pariatur minus cupiditate repellat officia quis
culpa
reprehenderit aperiam suscipit labore, molestias dolorem
delectus. Ipsum
veniam facere illum temporibus dolor, nemo corporis quibusdam
nobis
voluptate perspiciatis maxime, eos asperiores aut dolorem
possimus ipsam
deserunt incidunt? Perferendis nostrum consectetur, sapiente non
perspiciatis suscipit adipisci aliquam ad consequuntur obcaecati
delectus officiis tempore officia magnam eaque accusantium
similique
tempora necessitatibus iure incidunt, labore odit voluptates?
Veniam
soluta ut dicta quia. Ut, natus! Ducimus id facilis, possimus
placeat
cumque iste aut libero harum tempora nesciunt recusandae, vel
illo
accusamus voluptas incidunt veritatis inventore eum voluptatem?
</p>
<div class="clear"></div>
</div>
</body>
</html>

10
Lab. Pemrograman Komputer ITN Malang 2024
Hasil :

10. Position
Position di CSS digunakan untuk menentukan posisi sebuah elemen HTML dalam
halaman web. Ada beberapa tipe position yang bisa digunakan, yaitu:
1. Static
Posisi default dari sebuah elemen. Elemen dengan position static akan diatur oleh
aliran dokumen dan posisinya tidak bisa diubah.
2. Relative
Elemen akan diposisikan relatif terhadap posisi normalnya. Elemen dengan position
relative bisa digeser ke kiri, ke kanan, ke atas, atau ke bawah dengan menggunakan
properti top, bottom, left, atau right.
Source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Position</title>
<style>
.satu {
width: 100px;
height: 100px;
background-color: red;
}
.dua {
width: 100px;
height: 100px;
background-color: green;
position: relative;
top: 20px;
left: 90px;
}
.tiga {

11
Lab. Pemrograman Komputer ITN Malang 2024
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="satu"></div>
<div class="dua"></div>
<div class="tiga"></div>
</body>
</html>

Hasil

3. Absolute
Elemen akan diposisikan terhadap elemen yang dianggap sebagai "parent" terdekat
yang mempunyai position relative atau position absolute. Jika tidak ada elemen parent
dengan position yang sesuai, maka elemen akan diposisikan relatif terhadap body.
Elemen dengan position absolute bisa digeser ke kiri, ke kanan, ke atas, atau ke bawah
dengan menggunakan properti top, bottom, left, atau right.
Source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Position</title>
<style>
div {
width: 100px;
height: 100px;
margin: auto;
}
.satu {

12
Lab. Pemrograman Komputer ITN Malang 2024
background-color: red;
}
.dua {
background-color: green;
position: absolute;
top: 0px;
left: 0px;
}
.tiga {
background-color: blue;
}
.container {
width: 600px;
height: 600px;
position: relative;
border: 20px solid yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="satu"></div>
<div class="dua"></div>
<div class="tiga"></div>
</div>
</body>
</html>

Hasil

4. Fixed
Elemen akan tetap berada di posisi yang sama, terlepas dari posisi scroll halaman
web. Elemen dengan position fixed bisa digeser ke kiri, ke kanan, ke atas, atau ke
bawah dengan menggunakan properti top, bottom, left, atau right.

13
Lab. Pemrograman Komputer ITN Malang 2024
11. Flexible Box Model
Flexbox merupakan mode layout yang mudah dan praktis untuk mengatur elemen
dengan menggunakan sebuah container. Flexbox dapat mengatur ukuran secara otomatis
dan mampu beradaptasi dengan ukuran containernya. Properti yang dapat dipakai jika
memakai flex yaitu Flex-container, Flex-direction, Flex-wrap, Justify-content, Align-items,
Align-content.
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 800px;
height: 200px;
margin: 20px auto;
border: 2px solid salmon;
display: flex;
flex-wrap: wrap;
}

.satu {
width: 200px;
padding: 20px;
text-align: center;
background-color: rgb(193, 237, 252);
}

.dua {
width: 200px;
padding: 20px;
text-align: center;
background-color: rgb(153, 252, 153);
}

.tiga {
width: 200px;
padding: 20px;
text-align: center;
background-color: rgb(253, 185, 196);
}

14
Lab. Pemrograman Komputer ITN Malang 2024
.empat {
width: 200px;
padding: 20px;
text-align: center;
background-color: rgb(255, 255, 148);
}

.lima {
width: 200px;
padding: 20px;
text-align: center;
background-color: rgb(241, 157, 223);
}
</style>
</head>
<body>
<div class="container">
<div class="satu">1</div>
<div class="dua">2</div>
<div class="tiga">3</div>
<div class="empat">4</div>
<div class="lima">5</div>
</div>
</body>
</html>

Hasil :

12. Grid
Grid adalah sebuah fitur yang memungkinkan kita untuk membuat tata letak halaman
web dengan susunan kolom dan baris yang fleksibel. Grid terdiri dari dua jenis yaitu grid
container dan grid item. Grid container merupakan wadah atau kotak yang menampung
grid item, sedangkan grid item adalah elemen-elemen di dalam kotak tersebut yang akan
diatur posisinya. Properti yang digunakan pada grid container terdiri dari grid-template-
columns, grid-template-rows, grid-template-areas, grid-template, grid-auto-columns, grid-
auto-rows, grid-auto-flow, grid-column-gap, grid-row-gap, grid-gap, justify-items, align-
items, place-items, justify-content, align-content, dan place-content.

15
Lab. Pemrograman Komputer ITN Malang 2024
Sedangkan properti yang digunakan pada grid item terdiri dari grid-column-start,
grid-column-end, grid-row-start, grid-row-end, grid-column, grid-row, grid-area, justify-
self, align-self, dan place-self.
Source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Grid</title>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: #ddd;
}

.container {
width: 80%;
margin: 50px auto;
display: grid;
grid-template-columns: minmax(200px, 300px) 1fr 1fr;
grid-template-rows: 100px 200px 50px;
grid-template-areas:
'header header header'
'sidebar content content'
'footer footer footer';
}

.item {
display: flex;
justify-content: center;
align-items: center;
}

.header {
grid-area: header;
background-color: rgb(193, 237, 252);
}

.sidebar {
grid-area: sidebar;
background-color: rgb(253, 185, 196);
}

.content {
grid-area: content;
background-color: rgb(153, 252, 153);
}

.footer {

16
Lab. Pemrograman Komputer ITN Malang 2024
grid-area: footer;
background-color: rgb(255, 255, 148);
}
</style>
</head>

<body>
<div class="container">
<div class="item header">1</div>
<div class="item sidebar">2</div>
<div class="item content">3</div>
<div class="item footer">4</div>
</div>
</body>
</html>

Hasil

13. Responsive web design


Desain web responsif (responsive web design) adalah sebuah konsep pengembangan
aplikasi web yang memungkinkan layout untuk menyesuaikan dengan resolusi layar
pengguna (viewport). Desain ini menjadikan aplikasi web mampu menyediakan tampilan
yang optimal untuk semua ukuran layar pengguna. Melalui fitur media query, pengembang
aplikasi dapat menyediakan aturan-aturan CSS yang dapat diberlakukan untuk variasi layer
pengguna. Secara sederhana, media query adalah filter yang akan diberlakukan terhadap
halaman web sesuai dengan identifikasi browser. Media query yang dipakai sangat
beragam tergantung dari berapa ukuran maximal dari sebuah device ini dapat dicari
melalui google dengan keyword “responsive breakpoints” atau bisa melihat gambar berikut

17
Lab. Pemrograman Komputer ITN Malang 2024
Contoh misalnya kita ingin agar tampilan website masih enak dilihat oleh pengguna
device smartphone dengan ukuran 576px dan tablet dengan ukuran 768px, maka kita akan
memerlukan 2 buah media query yang akan dipakai untuk mengatur styling css pada
ukuran layar tersebut
Source code jika memakai grid
<!DOCTYPE html>
<html>
<head>
<title>Contoh Media Query</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
/* Desktop style */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}

.item {
background-color: #ddd;
border: 1px solid #333;
text-align: center;
padding: 10px;
}

.item:nth-child(odd) {
background-color: #eee;
}

/* Tablet style */
@media (max-width: 768px) {
.container {

18
Lab. Pemrograman Komputer ITN Malang 2024
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(6, 1fr);
}
}

/* Mobile style */
@media (max-width: 576px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: repeat(12, 1fr);
grid-gap: 5px;
}

.item {
padding: 5px;
font-size: 14px;
}
}

</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>

Hasil
Layar Dekstop

Layar Tablet

19
Lab. Pemrograman Komputer ITN Malang 2024
Layar Smartphone

Source code jika memakai flexbox


<!DOCTYPE html>
<html>
<head>
<title>Contoh Responsive Memakai Flexbox</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
* {
box-sizing: border-box;
}

.container {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 10px;
}

.item {
flex-basis: calc(25% - 10px);
background-color: #ddd;
border: 1px solid #333;
text-align: center;
padding: 10px;
}

.item:nth-child(odd) {
background-color: #eee;
}

@media (max-width: 768px) {


.container {
justify-content: space-around;
}

.item {
flex-basis: calc(50% - 10px);
}
}

@media (max-width: 576px) {


.container {
flex-direction: column;

20
Lab. Pemrograman Komputer ITN Malang 2024
margin: 10px;
}

.item {
flex-basis: calc(100% - 10px);
margin-bottom: 10px;
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>

E. Project Praktikum
1. Buat folder transaction, categories dan css pada folder CatShop yang telah dibuat
sebelumnya
2. Buat file baru dengan nama style.css, dan letakkan dalam folder css yang telah dibuat.
Source code style.css :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.container {
width: 80%;
margin: 0 auto;
}

body {
font-family: "Poppins", sans-serif;
}

/* new nav */
nav {
display: flex;
height: 80px;
width: 100%;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}

21
Lab. Pemrograman Komputer ITN Malang 2024
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: #111;
text-decoration: none;
font-weight: 500;
padding: 8px 15px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: #ffb72b;
}
nav .menu-btn i {
color: #000;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}

.btn_login {
background-color: #ffb72b;
width: 100%;
padding: 8px 16px;
border-radius: 10px;
border: none;
cursor: pointer;
color: white;
}

.btn_login:hover {
background-color: #eba416;
color: #fff;
}

/* style jumbotron */
.jumbotron {
display: flex;
background-color: #ffb72b;
border-radius: 20px;
padding: 20px 0;
justify-content: space-around;
align-items: center;
margin-bottom: 50px;
}

.jumbotron-text {
width: 30%;

22
Lab. Pemrograman Komputer ITN Malang 2024
font-weight: 500;
}

.jumbotron-text p {
color: white;
margin: 20px 0;
}

.jumbotron-text button {
padding: 10px 18px;
border: none;
border-radius: 10px;
background-color: white;
color: #ffb72b;
cursor: pointer;
}

/* style card-categories */
.cards-categories {
display: flex;
flex-direction: column;
align-items: center;
}

.cards-categories h2 {
font-family: "Roboto", sans-serif;
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}

.card-categories {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.card {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
overflow: hidden;
transition: transform 0.3s ease-in-out;
}

.card:hover {
transform: scale(1.05);
}

.card .card-image {
overflow: hidden;
border-radius: 15px 15px 0 0;
}

.card img {
width: 100%;
height: auto;
object-fit: cover;

23
Lab. Pemrograman Komputer ITN Malang 2024
border-radius: 15px 15px 0 0;
}

.card-content {
padding: 20px;
}

.card h5 {
margin-bottom: 10px;
font-family: "Roboto", sans-serif;
font-size: 22px;
font-weight: 600;
color: #333;
}

.card p.description {
font-size: 14px;
color: #666;
margin-bottom: 15px;
}

.card p.price {
font-size: 18px;
font-weight: bold;
color: #ffb72b;
margin-bottom: 15px;
}

.card .btn_belanja {
background-color: #ffb72b;
padding: 12px 20px;
border-radius: 8px;
border: none;
cursor: pointer;
color: white;
font-size: 16px;
transition: background-color 0.3s ease;
}

.card .btn_belanja:hover {
background-color: #eba416;
}

/* footer */
footer {
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0;
}

/* style page login */

24
Lab. Pemrograman Komputer ITN Malang 2024
.center {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
}

.form-login {
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
background-color: white;
padding: 30px;
margin: 0 auto;
box-shadow: 0 6px 12px 4px rgba(0, 0, 0, 0.15);
border-radius: 10px;
}

.input {
width: 100%;
margin: 10px 0;
padding: 10px;
border-radius: 10px;
border: 1px solid rgb(148, 148, 148);
}

.link-register {
text-decoration: none;
margin-top: 10px;
}

/* responsive */
@media screen and (max-width: 1023px) {
.container {
width: 100%;
margin: 0 auto;
}
/* navbar responsive */
nav {
padding: 0 40px 0 50px;
position: relative;
}

nav .menu-btn i {
display: block;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";
}
nav ul {
position: absolute;
top: 80px;
left: -100%;
background: rgba(0, 0, 0, 0.85);

25
Lab. Pemrograman Komputer ITN Malang 2024
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
color: #fff;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
color: #ffb72b;
}

/* jumbotron responsive */
.jumbotron {
flex-direction: column-reverse;
border-radius: 0px !important;
justify-content: center;
}
.jumbotron-img img {
width: 100% !important;
}

.jumbotron-text {
width: 100% !important;
padding-left: 20px;
}

/* card-categories responsive */
.card-categories {
flex-direction: column;
gap: 20px;
margin: 0 10px;
}

.card {
width: 100% !important;
}

/* form-login responsive */
.form-login {
width: 80%;

26
Lab. Pemrograman Komputer ITN Malang 2024
}
.modal-content {
width: 80%; /* Sesuaikan ukuran modal untuk layar kecil */
}
}

3. Ubah isi dari file index.html


<!DOCTYPE html>
<html lang="en">

<head>
<link rel="icon" href="assets/icon.png" />
<title>Home</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin />
<link
href="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;700&family=Roboto:wght@500;700&display=swap"
rel="stylesheet" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css" />
</head>

<body>
<div class="container">
<header>
<nav>
<div class="logo">
<img src="assets/logo.png" alt="" />
</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="login.html"
class="btn_login">Login</a></li>
</ul>
</nav>
</header>
<main>
<div class="jumbotron">
<div class="jumbotron-text">
<h1>Find Your New Little Cat, Make a New
Friend</h1>
<p> Teman barumu yang lucu menunggu mu,
ayo temukan mereka sekarang
</p>
<button type="button"
class="btn_getStarted">Get Started</button>

27
Lab. Pemrograman Komputer ITN Malang 2024
</div>
<div class="jumbotron-img">
<img src="assets/jumbotron.png" alt="" />
</div>
</div>
<div class="cards-categories">
<h2>Cat Categories</h2>
<div class="card-categories">
<div class="card">
<div class="card-image">
<img src="assets/anggora.png"
alt="gambar tidak ditemukan" />
</div>
<div class="card-content">
<h5>Anggora</h5>
<p class="description">Anggora
turki adalah salah satu ras kucing domestik alami tertua. Ras
ini berasal dari Ankara,
Turki. Kucing ini sangat populer dan terkenal di Indonesia.</p>
<p
class="price"><span>Rp.</span>50,000</p>
<button class="btn_belanja"
type="submit">Beli</button>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="assets/persia.png"
alt="gambar tidak ditemukan" />
</div>
<div class="card-content">
<h5>Persia</h5>
<p class="description">Kucing
persia adalah ras kucing domestik berbulu panjang dengan karakter wajah
bulat dan moncong pendek. Namanya mengacu pada Persia.</p>
<p
class="price"><span>Rp.</span>50,000</p>
<button class="btn_belanja"
type="submit">Beli</button>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="assets/british.png"
alt="gambar tidak ditemukan" />
</div>
<div class="card-content">
<h5>British Shorthair</h5>
<p class="description">Kucing
bulu pendek britania adalah salah satu ras kucing tertua di inggris.
Kucing ini adalah kucing berbadan sedang dengan bulu yang pendek. </p>
<p
class="price"><span>Rp.</span>50,000</p>
<button class="btn_belanja"
type="submit">Beli</button>
</div>
</div>

28
Lab. Pemrograman Komputer ITN Malang 2024
</div>
</div>
</main>
<footer>
<h4>&copy; Lab Pemrograman Komputer 2024</h4>
</footer>
</div>
</body>

</html>

Hasil Tampilan di Laptop atau PC:

Hasil Tampilan di Handphone :

4. Ubah isi dari file login.html

29
Lab. Pemrograman Komputer ITN Malang 2024
Source code login.html :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<link rel="icon" href="assets/icon.png" />
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;700&family=Roboto:wght@500;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css"/>
</head>
<body>
<div class="container">
<header>
<nav>
<div class="logo">
<img src="assets/logo.png" alt="" />
</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="login.html" class="btn_login">Login</a></li>
</ul>
</nav>
</header>
<main>
<div class="center">
<div class="form-login">
<h3>Login</h3>
<form action="">
<input class="input" type="text" name="username"
placeholder="Username" />
<input class="input" type="password" name="password"
placeholder="Password" />
<button type="submit" class="btn_login" name="login"
id="login"> Login
</button>
</form>
<a href="register.html" class="link-register">
Register Disini</a>
</div>
</div>
</main>

30
Lab. Pemrograman Komputer ITN Malang 2024
<footer>
<h4>&copy; Lab Pemrograman Komputer 2024</h4>
</footer>
</div>
</body>
</html>

Hasil Tampilan di Laptop atau PC:

Hasil Tampilan di Handphone :

5. Ubah isi register.html

31
Lab. Pemrograman Komputer ITN Malang 2024
<!DOCTYPE html>
<html lang="en">
<head>
<title>Register</title>
<link rel="icon" href="assets/icon.png" />
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;700&family=Roboto:wght@500;700&display=swap"
rel="stylesheet"/>
<link
rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/
all.min.css"/>
</head>
<body>
<div class="container">
<header>
<nav>
<div class="logo">
<img src="assets/logo.png" alt="" />
</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="login.html" class="btn_login">Login</a></li>
</ul>
</nav>
</header>
<main>
<div class="center">
<div class="form-login">
<h3>Register</h3>
<form action="">
<input class="input" type="email" name="email"
placeholder="Email" />
<input class="input" type="text" name="username"
placeholder="Username"/>
<input class="input" type="password" name="password"
placeholder="Password" />
<button type="submit" class="btn_login" name="register"
id="register">
Register
</button>
</form>
</div>
</div>
</main>
<footer>
<h4>&copy; Lab Pemrograman Komputer 2024</h4>

32
Lab. Pemrograman Komputer ITN Malang 2024
</footer>
</div>
</body>
</html>

Hasil Tampilan di Laptop atau PC:

Hasil Tampilan di Handphone :

33
Lab. Pemrograman Komputer ITN Malang 2024
6. Buatlah file css baru dengan nama admin.css dan simpan kedalam folder css yang telah
dibuat sebelumnya. Kemudian tambahkan baris code dibawah ini
Source code admin.css:

@import url("https://fonts.googleapis.com/css2?
family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
/* sidebar */
.sidebar {
position: fixed;
height: 100%;
width: 240px;
background: #ffb72b;
transition: all 0.5s ease;
}
.sidebar.active {
width: 60px;
}
.sidebar .logo-details {
height: 80px;
display: flex;
align-items: center;
}
.sidebar .logo-details i {
font-size: 28px;
font-weight: 500;
color: #fff;
min-width: 60px;
text-align: center;
}
.sidebar .logo-details .logo_name {
color: #fff;
font-size: 24px;
font-weight: 500;
}
.sidebar .nav-links {
margin-top: 10px;
}
.sidebar .nav-links li {
position: relative;
list-style: none;
height: 50px;
}
.sidebar .nav-links li a {
height: 100%;
width: 100%;
display: flex;
align-items: center;

34
Lab. Pemrograman Komputer ITN Malang 2024
text-decoration: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li a.active {
background: #eba416;
}
.sidebar .nav-links li a:hover {
background: #eba416;
}
.sidebar .nav-links li i {
min-width: 60px;
text-align: center;
font-size: 18px;
color: #fff;
}
.sidebar .nav-links li a .links_name {
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}

/* main content */
.home-section {
position: relative;
background: #f5f5f5;
min-height: 100vh;
width: calc(100% - 240px);
left: 240px;
transition: all 0.5s ease;
}
.sidebar.active ~ .home-section {
width: calc(100% - 60px);
left: 60px;
}
.home-section nav {
display: flex;
justify-content: space-between;
height: 80px;
background: #fff;
display: flex;
align-items: center;
position: fixed;
width: calc(100% - 240px);
left: 240px;
z-index: 100;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.sidebar.active ~ .home-section nav {
left: 60px;
width: calc(100% - 60px);
}
.home-section nav .sidebar-button {
display: flex;
align-items: center;

35
Lab. Pemrograman Komputer ITN Malang 2024
font-size: 24px;
font-weight: 500;
}
nav .sidebar-button i {
font-size: 35px;
margin-right: 10px;
}

.home-section nav .profile-details {


display: flex;
align-items: center;
justify-content: center;
background: #f5f6fa;
border: 2px solid #efeef1;
border-radius: 6px;
height: 50px;
min-width: 190px;
}
.table-data {
text-align: center;
border-collapse: collapse;
width: 100%;
overflow-x: auto;

.btn-edit,
.btn-delete {
padding: 8px 16px;
margin-right: 8px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s;
}

.btn-edit {
background-color: #4caf50; /* Green */
color: white;
}

.btn-delete {
background-color: #f44336; /* Red */
color: white;
}

.btn-edit:hover,
.btn-delete:hover {
background-color: #45a049; /* Darker green */
}

nav .profile-details .admin_name {


font-size: 15px;
font-weight: 500;
color: #333;
white-space: nowrap;

36
Lab. Pemrograman Komputer ITN Malang 2024
}
.home-section .home-content {
position: relative;
padding-top: 104px;
padding-left: 20px;
padding-right: 20px;
}

.btn {
background-color: #ffb72b;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.btn a {
text-decoration: none;
color: white;
}

.btn-tambah {
margin: 10px 0;
}

.btn-simpan {
width: 100%;
}

.btn:hover {
background-color: #eba416;
}

.table-data {
text-align: center;
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 5px 20px;
}
.form-login {
display: flex;
flex-direction: column;
align-items: center;
background-color: white;
padding: 30px;
margin: 10px auto;
border-radius: 10px;
}
.input {
width: 100%;
margin: 10px 0;
padding: 10px;
border-radius: 10px;

37
Lab. Pemrograman Komputer ITN Malang 2024
border: 1px solid rgb(148, 148, 148);
}
/* waran status transaksi */
.success {
background-color: #4CAF50; /* Green */
color: white;
border-radius: 5px;
padding: 5px 10px;
}

.pending {
background-color: #FFC107; /* Yellow */
color: black;
}

.expire {
background-color: #f44336; /* Red */
color: white;
}

.cancel {
background-color: #607D8B; /* Blue Grey */
color: white;
}

.settlement {
background-color: #2196F3; /* Blue */
color: white;
}
.btn_detail {
background-color: #2196F3; /* Blue */
color: white;
padding: 5px 10px;
border-radius: 5px;
border: none;
}
.btn_detail:hover {
background-color: #0d8bf0; /* Blue */
}

/* Responsive Media Query */


@media (max-width: 1240px) {
.sidebar {
width: 60px;
}
.sidebar.active {
width: 220px;
}
.home-section {
width: calc(100% - 60px);
left: 60px;
}
.sidebar.active ~ .home-section {
/* width: calc(100% - 220px); */
overflow: hidden;
left: 220px;
}

38
Lab. Pemrograman Komputer ITN Malang 2024
.home-section nav {
width: calc(100% - 60px);
left: 60px;
}
.sidebar.active ~ .home-section nav {
width: calc(100% - 220px);
left: 220px;
}
}
@media (max-width: 700px) {
nav .profile-details {
display: none !important;
}
.home-section nav .profile-details {
height: 50px;
min-width: 40px;
}
}
@media (max-width: 550px) {
.profile-details {
display: none !important;
}

}
@media (max-width: 400px) {
.sidebar {
width: 0;
}
.sidebar.active {
width: 60px;
}
.home-section {
width: 100%;
left: 0;
}
.sidebar.active ~ .home-section {
left: 60px;
width: calc(100% - 60px);
}
.home-section nav {
width: 100%;
left: 0;
}
.sidebar.active ~ .home-section nav {
left: 60px;
width: calc(100% - 60px);
}
}

7. Buat file baru dengan nama admin.html


Source Code admin.html :
<!DOCTYPE html>
<html lang="en">

<head>

39
Lab. Pemrograman Komputer ITN Malang 2024
<meta charset="UTF-8" />
<link rel="icon" href="assets/icon.png" />
<link rel="stylesheet" href="css/admin.css" />
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Catshop Admin</title>
</head>

<body>
<div class="sidebar">
<div class="logo-details">
<i class="bx bx-category"></i>
<span class="logo_name">CatShop</span>
</div>
<ul class="nav-links">
<li>
<a href="#" class="active">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Dashboard</span>
</a>
</li>
<li>
<a href="categories/categories.html">
<i class="bx bx-box"></i>
<span class="links_name">Categories</span>
</a>
</li>
<li>
<a href="transaction/transaction.html">
<i class="bx bx-list-ul"></i>
<span class="links_name">Transaction</span>
</a>
</li>
<li>
<a href="#">
<i class="bx bx-log-out"></i>
<span class="links_name">Log out</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
</div>
<div class="profile-details">
<span class="admin_name">Catshop Admin</span>
</div>
</nav>
<div class="home-content">
<h1>Selamat Datang Admin</h1>
</div>
</section>
<script>

40
Lab. Pemrograman Komputer ITN Malang 2024
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".sidebarBtn");
sidebarBtn.onclick = function () {
sidebar.classList.toggle("active");
if (sidebar.classList.contains("active")) {
sidebarBtn.classList.replace("bx-menu", "bx-menu-
alt-right");
} else sidebarBtn.classList.replace("bx-menu-alt-
right", "bx-menu");
};
</script>
</body>

</html>

Hasil Tampilan di Laptop atau PC:

Hasil Tampilan di Handphone :

41
Lab. Pemrograman Komputer ITN Malang 2024
8. Buat file baru dengan nama categories.html kemudian simpan ke dalam folder categories.
Source Code categories.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="UTF-8" />
<link rel="icon" href="../assets/icon.png" />
<link rel="stylesheet" href="../css/admin.css" />
<!-- Boxicons CDN Link -->
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Catshop Admin | Categories</title>
</head>

<body>
<div class="sidebar">
<div class="logo-details">
<i class="bx bx-category"></i>
<span class="logo_name">CatShop</span>
</div>
<ul class="nav-links">
<li>
<a href="../admin.html" class="active">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Dashboard</span>
</a>
</li>
<li>
<a href="../categories/categories.html">
<i class="bx bx-box"></i>
<span class="links_name">Categories</span>
</a>
</li>
<li>
<a href="../transaction/transaction.html">
<i class="bx bx-list-ul"></i>
<span class="links_name">Transaction</span>
</a>
</li>
<li>
<a href="#">
<i class="bx bx-log-out"></i>
<span class="links_name">Log out</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
</div>

42
Lab. Pemrograman Komputer ITN Malang 2024
<div class="profile-details">
<span class="admin_name">Catshop Admin</span>
</div>
</nav>
<div class="home-content">
<h3>Categories</h3>
<button type="button" class="btn btn-tambah">
<a href="categories-entry.html">Tambah Data</a>
</button>
<table class="table-data">
<thead>
<tr>
<th scope="col" style="width:
20%">Photo</th>
<th>Categories</th>
<th scope="col" style="width:
20%">Description</th>
<th scope="col" style="width:
15%">Price</th>
<th scope="col" style="width:
30%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><img
src="../assets/thumbnail/anggora.png" alt="" /></td>
<td>Anggora</td>
<td>Anggora turki adalah salah satu
ras kucing domestik alami tertua. Ras ini berasal dari
Ankara, Turki. Kucing ini
sangat populer dan terkenal di Indonesia.</td>
<td>450,000</td>
<td>
<button class="btn-edit"
onclick="editCategory()">Edit</button>
<button class="btn-delete"
onclick="deleteCategory()">Hapus</button>
</td>
</tr>
</tbody>
</table>
</div>
</section>
<script>
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".sidebarBtn");
sidebarBtn.onclick = function () {
sidebar.classList.toggle("active");
if (sidebar.classList.contains("active")) {
sidebarBtn.classList.replace("bx-menu", "bx-menu-
alt-right");
} else sidebarBtn.classList.replace("bx-menu-alt-
right", "bx-menu");
};
</script>
</body>

43
Lab. Pemrograman Komputer ITN Malang 2024
</html>

Hasil :

9. Buat file baru dengan nama categories-entry.html, kemudian simpan ke dalam folder
categories.
Source code categories-entry.html :
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="UTF-8" />
<link rel="icon" href="../assets/icon.png" />
<link rel="stylesheet" href="../css/admin.css" />
<!-- Boxicons CDN Link -->
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Catshop Admin | Categories Entry</title>
</head>

<body>
<div class="sidebar">
<div class="logo-details">
<i class="bx bx-category"></i>
<span class="logo_name">CatShop</span>
</div>
<ul class="nav-links">
<li>
<a href="../admin.html" class="active">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Dashboard</span>
</a>
</li>
<li>
<a href="../categories/categories.html">
<i class="bx bx-box"></i>
<span class="links_name">Categories</span>

44
Lab. Pemrograman Komputer ITN Malang 2024
</a>
</li>
<li>
<a href="../transaction/transaction.html">
<i class="bx bx-list-ul"></i>
<span class="links_name">Transaction</span>
</a>
</li>
<li>
<a href="#">
<i class="bx bx-log-out"></i>
<span class="links_name">Log out</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
</div>
<div class="profile-details">
<span class="admin_name">Catshop Admin</span>
</div>
</nav>
<div class="home-content">
<h3>Input Categories</h3>
<div class="form-login">
<form action="">
<label for="categories">Categories</label>
<input class="input" type="text"
name="categories" id="categories" placeholder="Categories" />
<label for="categories">Price</label>
<input class="input" type="text"
name="price" id="price" placeholder="Price" />
<label for="categories">Description</label>
<input class="input" type="text"
name="Description" id="Description" placeholder="Description" />
<label for="photo">Photo</label>
<input type="file" name="photo" id="photo"
style="margin-bottom: 20px" />
<button type="submit" class="btn btn-
simpan" name="simpan">
Simpan
</button>
</form>
</div>
</div>
</section>
<script>
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".sidebarBtn");
sidebarBtn.onclick = function () {
sidebar.classList.toggle("active");
if (sidebar.classList.contains("active")) {
sidebarBtn.classList.replace("bx-menu", "bx-menu-
alt-right");

45
Lab. Pemrograman Komputer ITN Malang 2024
} else sidebarBtn.classList.replace("bx-menu-alt-
right", "bx-menu");
};
</script>
</body>

</html>

Hasil :

10. Buat file baru dengan nama transaction.html, dan di masukkan ke dalam folder
transaction.
Source code transaction.html :
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<link rel="icon" href="../assets/icon.png" />
<link rel="stylesheet" href="../css/admin.css" />
<!-- Boxicons CDN Link -->
<link href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Catshop Admin | Transaction</title>
</head>

<body>
<div class="sidebar">
<div class="logo-details">
<i class="bx bx-category"></i>
<span class="logo_name">CatShop</span>
</div>
<ul class="nav-links">
<li>

46
Lab. Pemrograman Komputer ITN Malang 2024
<a href="../admin.html" class="active">
<i class="bx bx-grid-alt"></i>
<span class="links_name">Dashboard</span>
</a>
</li>
<li>
<a href="../categories/categories.html">
<i class="bx bx-box"></i>
<span class="links_name">Categories</span>
</a>
</li>
<li>
<a href="../transaction/transaction.html">
<i class="bx bx-list-ul"></i>
<span class="links_name">Transaction</span>
</a>
</li>
<li>
<a href="#">
<i class="bx bx-log-out"></i>
<span class="links_name">Log out</span>
</a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<i class="bx bx-menu sidebarBtn"></i>
</div>
<div class="profile-details">
<span class="admin_name">Catshop Admin</span>
</div>
</nav>
<div class="home-content">
<h3>Transaction</h3>
<table class="table-data">
<thead>
<tr>
<th>Tanggal</th>
<th>Nama</th>
<th>Kategori</th>
<th>Harga</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>02-03-2023</td>
<td>Raflizar</td>
<td>Anggora</td>
<td>450000</td>
<td>
<p class="success">Success</p>
</td>
<td>

47
Lab. Pemrograman Komputer ITN Malang 2024
<button class="btn_detail"
onclick="showDetails('02-03-2023', 'Raflizar',
'Anggora', '450000', 'Success')">Detail</button>
</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
</div>
</section>
<script>
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".sidebarBtn");
sidebarBtn.onclick = function () {
sidebar.classList.toggle("active");
if (sidebar.classList.contains("active")) {
sidebarBtn.classList.replace("bx-menu", "bx-menu-alt-right");
} else sidebarBtn.classList.replace("bx-menu-alt-right", "bx-
menu");
};
function showDetails(tanggal, nama, kategori, harga, status) {
alert(`Tanggal: ${tanggal}\nNama: ${nama}\nKategori: $
{kategori}\nHarga: ${harga}\nStatus: ${status}`);
}
</script>
</body>

</html>

Hasil :

48
Lab. Pemrograman Komputer ITN Malang 2024
F. Tugas Praktikum
1. Tambahkan CSS pada halaman html pada tugas BAB 1 sebelumnya, buat responsive
minimal 1 media query bebas untuk device ukuran berapa.
2. Buat halaman dashboard pada project sesuai tema masing masing minimal 2 data yang
nantinya akan dilakukan CRUD. Dan data1 akan di ambil di data2 Contoh pada catshop
seperti Data Categories akan diambil oleh Transaction
3. DILARANG MENGGUNAKAN STYLING / LAYOUT / ASET DARI
PRAKTIKUM

49
Lab. Pemrograman Komputer ITN Malang 2024

Anda mungkin juga menyukai