Laporan Web

LAPORAN PRAKTIKUM
PEMROGRAMMAN WEB
SEMESTER GENAP TAHUN AKADEMIK 2021/2022
Disusun oleh :
Nama : Shohibul Maarif
NIM : 2018066
Jurusan : Teknik Informatika
Kelompok : 16
PROGRAM STUDI TEKNIK INFORMATIKA S-1

FAKULTAS TEKNOLOGI INDUSTRI
INSTITUT TEKNOLOGI NASIONAL MALANG
2022
LEMBAR PERSETUJUAN
PEMROGRAMMAN WEB
Disusun Oleh
NAMA : Shohibul Maarif
NIM : 2018066
KELOMPOK : 16
Mengetahui Menyetujui
Ka. Lab. Pemrograman Komputer Dosen Pembimbing
(Ahmad Faisol, ST, MT) (Hani Zulfia Zahro, S.Kom.M.Kom)

NIP. Y.1031000431 NIP.P : 1031500480
PROGRAM STUDI TEKNIK INFORMATIKA S-1

FAKULTAS TEKNOLOGI INDUSTRI
INSTITUT TEKNOLOGI NASIONAL MALANG
2022
ii
KATA PENGANTAR
Dengan memanjatkan puji syukur kehadirat Allah SWT, karena atas
berkah rahmat dan karunia-Nya sehingga penulis dapat menyelesaikan Laporan
Praktikum Pemrogramman Web, guna persyaratan dalam menempuh mata kuliah
tersebut.
Laporan ini disusun berdasarkan percobaan dan teori dasar yang ada dalam
buku panduan praktikum, teori yang diperoleh praktikan dari perkuliahan, dan
tidak lupa yaitu Internet sehingga penulis dapat menambah tidak hanya menguasai
teori saja namun juga memahami serta mengaplikasikannya.
Terwujudnya laporan ini, tentunya tidak lepas dari bantuan-bantuan yang
telah penulis terima. Pada kesempatan ini, penulis menyampaikan terima kasih
yang sebesar-besarnya kepada yang terhormat:
1. Ibu Hani Zulfia Zahro, S.Kom.M.Kom selaku dosen pembimbing Prak-
tikum Pemrograman Web.
2. Bapak Ahmad Fahrudi Setiawan, S.Kom, M.Kom, Ibu Febriana Santi
Wahyuni S.Kom, M.Kom, dan Ibu Nurlaily Vendyansyah, ST, MT Se-
laku dosen matakuliah Pemrograman Web.
3. Bapak Ahmad Faisol, ST, MT selaku Ketua Pelaksana Praktikum Pem-
rograman Web Program Studi Teknik Informatika ITN Malang.
4. Instruktur Lab.Pemrograman Komputer Teknik Informatika yang telah
memberi petunjuk kepada penulis selama pelaksanaan praktikum.
5. Rekan-rekan yang telah membantu dalam pelaksanaan dan penyelesaian
laporan ini.
Harapan penulis, laporan praktikum ini bermanfaat bagi penulis sendiri
maupun pembaca sekalian.
Malang, ... ……… 2022
Penulis
iii
iv
DAFTAR ISI
KATA PENGANTAR.............................................................................................ii
DAFTAR ISI..........................................................................................................iii
DAFTAR GAMBAR..............................................................................................vi
DAFTAR TABLE...................................................................................................ix
BAB I PENDAHULUAN.....................................................................................I-1
I.1 Latar Belakang.............................................................................................I-1
I.2 Rumusan Masalah........................................................................................I-2
I.3 Tujuan...........................................................................................................I-2
I.4 Manfaat.........................................................................................................I-2
BAB II HTML.....................................................................................................II-1
II.1 Landasan Teori..........................................................................................II-1
II.2 Langkah – Langkah Praktikum..................................................................II-2
II.3 Projek Praktikum : CatShop......................................................................II-2
II.4 Projek Rumah : Penyewaan Gitar..............................................................II-5
II.5 Kesimpulan................................................................................................II-7
BAB III CSS.......................................................................................................III-1
III.1 Landasan Teori........................................................................................III-1
III.2 Langkah – Langkah Praktikum...............................................................III-9
III.3 Projek Praktikum : CatShop....................................................................III-9
III.4 Projek Rumah : Penyewaan Gitar.........................................................III-24
III.5 Kesimpulan...........................................................................................III-33
BAB IV JAVASCRIPT......................................................................................IV-1
IV.1 Landasan Teori.......................................................................................IV-1
IV.2 Langkah – Langkah Praktikum...............................................................IV-5
IV.3 Projek Praktikum : CatShop...................................................................IV-6

v
IV.4 Projek Rumah : Program Web Kalkulator..............................................IV-7
IV.5 Projek Rumah : Penyewaan Gitar.........................................................IV-10
IV.6 Kesimpulan...........................................................................................IV-11
BAB V PHP DASAR DAN DATABASE..........................................................V-1
V.1 Landasan Teori..........................................................................................V-1
V.2 Langkah – Langkah Praktikum.................................................................V-2
V.3 Projek Praktikum : CatShop......................................................................V-2
V.4 Projek Rumah : Penyewaan Gitar...........................................................V-10
V.5 Kesimpulan..............................................................................................V-14
BAB VI PHP LOGIN DAN CRUD I.................................................................VI-1
VI.1 Landasan Teori.......................................................................................VI-1
VI.2 Langkah – Langkah Praktikum...............................................................VI-2
VI.3 Projek Praktikum : CatShop...................................................................VI-2
VI.4 Projek Rumah : Penyewaan Gitar.........................................................VI-12
VI.5 Kesimpulan...........................................................................................VI-23
BAB VII CRUD II DAN REPORT..................................................................VII-1
VII.1 Landasan Teori.....................................................................................VII-1
VII.2 Langkah – Langkah Praktikum............................................................VII-2
VII.3 Projek Praktikum : CatShop.................................................................VII-2
VII.4 Projek Rumah : Penyewaan Gitar......................................................VII-10
VII.5 Kesimpulan........................................................................................VII-22
BAB VIII FRAMEWORK..............................................................................VIII-1
VIII.1 Landasan Teori..................................................................................VIII-1
VIII.2 Langkah – Langkah Praktikum.........................................................VIII-6
VIII.3 Projek Praktikum : CatShop..............................................................VIII-6
VIII.4 Projek Rumah : CatShop.................................................................VIII-16

vi
VIII.5 Kesimpulan......................................................................................VIII-25
BAB IX KESIMPULAN....................................................................................IX-1
DAFTAR PUSTAKA.........................................................................................IX-2
vii
DAFTAR GAMBAR
Gambar 2.1 Tampilan Web Browser index.html..................................................II-3
Gambar 2.2 Tampilan Web Browser login.html..................................................II-4
Gambar 2.3 Tampilan Web Browser index.html..................................................II-6
Gambar 2.4 Tampilan Web Browser login.html..................................................II-7
Gambar 3.1 Hasil Css Valid Color Name...........................................................III-4
Gambar 3.2 Hasil Css RGB................................................................................III-4
Gambar 3.3 Hasil Css Hexadecimal...................................................................III-5
Gambar 3.4 Hasil Css Border.............................................................................III-6
Gambar 3.5 Tampilan Web Browser CSS Catshop..........................................III-12
Gambar 3.6 Tampilan Login Web Browser CSS Catshop................................III-13
Gambar 3.7 Tampilan Admin Web Browser CSS Catshop...............................III-17
Gambar 3.8 Tampilan Categories Web Browser Catshop................................III-18
Gambar 3.9 Tampilan Categories-Entry Web Browser Catshop.....................III-20
Gambar 3.10 Tampilan Transaction Web Browser Catshop............................III-22
Gambar 3.11 Tampilan Transaction Web Browser Catshop............................III-24
Gambar 3.12 Tampilan Home Web Browser CSS............................................III-28
Gambar 3.13 Tampilan login Web Browser.....................................................III-29
Gambar 3.14 Tampilan Admin Web Browser...................................................III-30
Gambar 3.15 Tampilan Categoies Web Browser.............................................III-31
Gambar 3.16 Tampilan Categoies-entry Web Browser....................................III-33
Gambar 4.1 Tampilan admin.html......................................................................IV-6
Gambar 4.2 Tampilan Web Kalkulator...............................................................IV-9
Gambar 4.3 Tampilan admin.html....................................................................IV-11
Gambar 5.1 db_2018066....................................................................................V-10
Gambar 5.2 tb_admin........................................................................................V-10

viii
Gambar 5.3 tb_categories..................................................................................V-10
Gambar 5.4 tb_transaction................................................................................V-10
Gambar 6.1 Koneksi database penyewaan_gitar.............................................VI-12
Gambar 6.2 Tampilan login admin...................................................................VI-13
Gambar 6.3 Tampilan halaman admin.............................................................VI-15
Gambar 6.4 Tampilan Logout...........................................................................VI-16
Gambar 6.5 Tampilan halaman input transaction............................................VI-18
Gambar 6.6 Tampilan Data ditambahkan.........................................................VI-18
Gambar 6.7 Tampilan halaman update data.....................................................VI-20
Gambar 6.8 Tampilan Data setelah di update..................................................VI-20
Gambar 6.9 Tampilan halaman hapus data......................................................VI-22
Gambar 6.10 Tampilan data setelah dihapus....................................................VI-22
Gambar 7.1 Tampilan Categories Edit catshop................................................VII-5
Gambar 7.2 Tampilan Categories hapus catshop.............................................VII-7
Gambar 7.3 Tampilan Categories Input catshop..............................................VII-8
Gambar 7.4 Tampilan dompdf catshop.............................................................VII-9
Gambar 7.5 Tampilan Categories catShop.....................................................VII-10
Gambar 7.6 Tampilan Categories Cetak Catshop..........................................VII-10
Gambar 7.7 Tampilan halaman tambah data categories.php..........................VII-13
Gambar 7.8 Tampilan halaman categories.php..............................................VII-13
Gambar 7.9 Tampilan Halaman Edit categories.............................................VII-16
Gambar 7.10 Tampilan Halaman hapus-categories.php.................................VII-18
Gambar 7.11 Tampilan dompf pada file xampp..............................................VII-20
Gambar 7.12 Tampilan Halaman cetak...........................................................VII-21
Gambar 8.1 MVC............................................................................................VIII-1
Gambar 8.2 Categories....................................................................................VIII-8

ix
Gambar 8.3 Categories-Entry........................................................................VIII-10
Gambar 8.4 Categories-edit...........................................................................VIII-12
Gambar 8.5 Categories-hapus.......................................................................VIII-13
Gambar 8.6 transaction..................................................................................VIII-17
Gambar 8.7 transaction -Entry.......................................................................VIII-19
Gambar 8.8 Transaction-edit.........................................................................VIII-20
Gambar 8.9 transtion-hapus..........................................................................VIII-22

x
DAFTAR TABLE
Tabel 2.1 Struktur tag HTML..............................................................................II-2
Tabel 4.1 Operator aritmatika.............................................................................IV-4
Tabel 4.2 Operator matematika..........................................................................IV-4
Tabel 4.3 Operator relasi....................................................................................IV-5

xi
BAB I
PENDAHULUAN
I.1 Latar Belakang
Website dapat diartikan sebagai kumpulan halaman yang menampilkan
informasi data teks, data gambar diam atau gerak, data animasi, suara, video
dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis
yang membentuk satu rangkaian bangunan yang saling terkait dimana
masing-masing dihubungkan dengan jaringan-jaringan halaman. Bersifat
statis apabila isi informasi tetap, jarang berubah, dan isi informasinya searah
hanya dari pemilik website. Bersifat dinamis apabila isi informasi website
selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari
pemilik serta pengguna website.
Dalam pembuatan website ada beberapa software yang digunakan
yaitu teks editor seperti sublime text dan visual studio code yang digunakan
untuk menulis dan membaca bahasa pemrograman, kemudian ada xampp
yang berfungsi sebagai server local untuk mengampu berbagai jenis data
website yang sedang dalam proses pengembangan, DBMS (Database
Management System) seperti MySQL, SQL Server, Microsoft Aceess, dan
Web Browser untuk mengakses website. Untuk pengembangan website
umumnya bahasa yang digunakan adalah HTML (Hypertext Markup
Language), CSS (Cascanding Style Sheet), Javascript dan PHP.
Salah satu keuntungan dari belajar pemrograman web adalah melatih
cara berfikir secara logis, seperti yang kita tau bahwa pengembangan
website membutuhkan banyak bahasa pemrograman sehingga untuk
memahami itu kita dituntut untuk berfikir secara logis, selain itu keuntungan
pembuatan sebuah aplikasi berbasis web adalah kita bisa membuat bisnis
sendiri seperti e-commerce dengan bantuan jaringan internet pemasaran kita
dapat lebih luas.
xii
I.2 Rumusan Masalah

1. Bagaimana membuat sebuah website sederhana menggunakan HTML
dan CSS ?
2. Bagaimana membuat website dinamis menggunakan Javascript ?
3. Bagaimana membuat proses CRUD menggunakan PHP pada sebuah
website ?
I.3 Tujuan
1. Praktikan mampu membuat sebuah website sederhana menggunakan
HTML dan CSS
2. Praktikan mampu membuat website dinamis menggunakan Javascript
3. Praktikan mampu membuat proses CRUD menggunakan php pada se-
buah website
I.4 Manfaat
1. Praktikan dapat dipermudah dalam membuat dan mendapat informasi
melalui sebuah website
2. Praktikan dapat membuat pekerjaannya menjadi lebih efisien dengan
menggunakan website
3. Praktikan dapat membuat bisnis sendiri seperti e-commerce dengan
bantuan jaringan internet
1
BAB II
HTML
Jumlah Pertemuan : 2 x 60 menit
Tujuan Praktikum : 1. Mampu menerapkan konsep dasar pemrograman
web.
2. Mampu mengetahui fungsi tag-tag pada html.
3. Mampu membuat halaman web menggunakan
html.
Alat / bahan : 1. Seperangkat computer.
2. Perangkat lunak: VS Code, XAMPP.
3. Modul Praktikum WEB 2022.
II.1 Landasan Teori

A. Pengertian
HTML (Hyper Text Markup Language) adalah bahasa markup un-
tuk mendeskripsi dokumen – dokumen web (halaman web). Bahasa
markup ini digunakan untuk menampilkan berbagai informasi dalam
web itu sendiri yang merupakan sekumpulan tag markup. Dokumen
HTML di deskripsikan oleh tag HTML. Setiap tag memiliki pendeskrip-
sian konten dokumen yang berbeda. Penulisan ekstensi html bisa meng-
gunakan .htm atau .html. Tidak ada perbedaan, itu sepenuhnya sesuai
kebutuhan pengguna. Kemudian untuk membaca dokumen HTML dan
menampilkannya sebagai halaman web dapat menggunakan web
browser (Mozilla, Chrome, dll). Browser tidak menampilkan tag HTML,
tetapi menggunakan tag untuk menafsirkan isi dari halaman tersebut.
B. Struktur
Source Code :
<!DOCTYPE html>
<html>
<head>
<title> Praktikum Web 2021</title>
</head>
<body>
Hello world
</body> </html>
Nama Aslab : TTD :

Nofia Hidayati
Tanggal :
2
Penjelasan :
Tabel II.1 Struktur tag HTML
<html>…</html> Merupakan tag dasar yang mendefinisikan bahwa
dokumen ini adalah dokumen HTML.Tag <html>
sebagai pembuka dokumen HTML dan tag
</html> sebagai penutup dokumen HTML
<head>…</head> Merupakan tag setelah <html> untuk menuliskan
keterangan tentang dokumen HTML. Isi teks
diantara <head> dengan </head> sering kali
digunakan untuk mendefinisikan suatu hal yang
harus dijalankan terlebih dahulu.
<title>…</title>
Merupakan tag yang digunakan untuk menuliskan
judul dokumen HTML. Hasil tag ini akan
ditampilkan dalam window caption browser.
<body>…</body> Merupakan section dalam dokumen HTML yang
akan ditampilkan dalam browser.
Aturan :
1. Tag HTML diapit dengan dua karakter kurung bersudut, < dan >.
2. Tag HTML secara normal selalu berpasangan seperti <H1> dengan
</H1>.
3. Tag HTML tidak ‘case sensitive’, seperti <H1> dengan <h1>.
II.2 Langkah – Langkah Praktikum

1. Buka Text Editor
2. Menulis Script
3. Buka file .html pada browser
II.3 Projek Praktikum : CatShop

1. Halaman Index.html
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
</head>
<body>
<center>
<div class="navbar">
<img src="assets/logo.png" alt="" />
<a href="">Home</a>
<a href="">Categories</a>
3
<a href="">Login</a>
</div>
<div class="jumbotron">
<h1>Find Your New Little Cat, Make a New
Friend</h1>
<p>Teman barumu yang lucu menunggu mu, ayo
temukan mereka sekarang</p>
<img src="assets/jumbotron.png" alt="" />
<button type="button">Get Started</button>
</div>
<div class="cards-categories">
<div class="card">
<img src="assets/anggora.png" alt="" />
</div>
<div class="card">
<img src="assets/persia.png" alt="" />
</div>
<div class="card">
<img src="assets/british.png" alt="" />
</div>
</div>
<div class="footer">
<h4>© Lab Pemrograman Komputer 2022</h4>
</div>
</center>
</body>
</html>
Hasil Tampilan :
Gambar II.1 Tampilan Web Browser index.html

4
2. Halaman Login.html
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
</head>
<body>
<center>
<a href="">Home</a>
</div>
<div class="form-login">
<h3>Login</h3>
<input type="text" name="username"
placeholder="Username" />
<input type="password" name="password"
placeholder="Password"
/>
<button type="input">Login</button>
</div>
<h4>© Lab Pemrograman Komputer 2022</h4>
</div>
</center>
</body>
</html>
Hasil Tampilan :
Gambar II.2 Tampilan Web Browser login.html

5
II.4 Projek Rumah : Penyewaan Gitar

1. Halaman Index.html
Source code :
<html lang="en">
<head><title>Home</title></head>
<body><center>
<img src="LOGO1.png" alt="" />
<a href="">Home</a>
</div>
<div class="grup2">
<h1>Cheap and Quality Guitar Rental</h1>
<p>"Penyewaan gitar disini berkualitas,
aman dan terpercaya"</p>
<img src="grup2.png" alt="" />
<button type="button">Get Started</button>
</div>
<div class="card">
<img src="gitar classic.PNG" alt="" />
</div>
<div class="card">
<img src="gitar resonator.png"
alt="" />
</div>
<div class="card">
<img src="gitar baja.png" alt="" />
</div>
</div>
<h4>© RentalGuitar ID</h4>
</div>
</center>
</body>
</html>
6
Hasil Tampilan :
Gambar II.2 Tampilan Web Browser index.html

3. Halaman Login.html
Source code :
<html lang="en">
<head>
</head>
<body>
<center>
<img src="LOGO1.png" alt="" />
<a href="">Home</a>
</div>
<h3>Login</h3>
<input type="text" name="username"
placeholder="Username" />
<input type="password" name="password"
7
/>
<button type="input">Login</button>
</div>
<h4>© RentalGuitar ID</h4>
</div>
</center>
</body>
</html>
Hasil Tampilan :
Gambar II.3 Tampilan Web Browser login.html

II.5 Kesimpulan
1. HTML (Hyper Text Markup Language) adalah bahasa markup untuk
mendeskripsi dokumen – dokumen web (halaman web).
2. <html> merupakan tag dasar yang mendefinisikan bahwa dokumen ini
adalah dokumen HTML.Tag <html> sebagai pembuka dokumen HTML
dan tag </html> sebagai penutup dokumen HTML.
3. <head> merupakan tag setelah <html> untuk menuliskan keterangan ten-
tang dokumen HTML. Isi teks diantara <head> dengan </head> sering
kali digunakan untuk mendefinisikan suatu hal yang harus dijalankan
terlebih dahulu.
4. <title> merupakan tag yang digunakan untuk menuliskan judul dokumen
HTML. Hasil tag ini akan ditampilkan dalam window caption browser.
5. <body> merupakan section dalam dokumen HTML yang akan dita-
mpilkan dalam browser.
1
BAB III
CSS
web.
html.
III.1 Landasan Teori

A. Pengertian CSS
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 se-
lector, dimana selector memiliki declarations. Declarations memi-
liki properties value. Penulisan CSS ini ada yang diselipkan di dalam
dokumen HTML ada juga yang berupa file tersendiri yang dapat di-
akses oleh HTML.
2. Selectors
CSS Selector digunakan untuk menemukan atau memilih nama
element, id, class, attribute dan lainnya di dalam halaman HTML.
Nama Aslab : TTD :

Nofia Hidayati
Tanggal :
2
a. Element / Tag
Memilih element atau tag sesuai dengan nama tag yang ada
pada halaman HTML.
p {
color: blue; text-align: center;
}
b. ID
Menggunakan atribut id pada tag HTML untuk pemanggi-
lannya. 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 el-
ement kemudian diikuti dengan tanda titik(.) dan dilanjutkan den-
gan nama class yang dideklarasikan.
Bentuk Class Umum :
kelas {
text-align: center; color: blue; }
d. Grouping
Penggabungan beberapa element / tag, yang memiliki prop-
erty dan value yang sama sehingga meringkas penulisan syntax,
untuk melakukan grouping hal yang harus diperhatikan adalah
tanda “,” pada selector sebagai pemisah tag – tag / element. Ben-
tuk sebelum Grouping :
h1 {
text-align: center; color: blue; }
h2 {
}
p {
}
3
Bentuk sesudah Grouping :

h1, h2, p {
}
e. Comment
Comment digunakan untuk mendeskripsikan syntax yang
ada pada css, dan akan diabaikan oleh browser. Penerapannya
menggunakan /*.....*/, ini berlaku untuk satu baris maupun lebih.
C. Penempatan CSS
1. External Style Sheet
Penempatan css pada satu file css, file css tersebut dibuat den-
gan 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
<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>
4
D. Properties Dasar CSS

1. Color
Terdapat 3 cara untuk pewarnaan style dalam CSS, yaitu Valid
Color Name, RGB dan Hexadecimal Value.
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 :
Gambar III.1 Hasil Css Valid Color Name

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 :
Gambar III.2 Hasil Css RGB

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>
</body>
</html>
5
Hasil :
Gambar III.3 Hasil Css Hexadecimal

2. Background
Digunakan untuk mengatur style background suatu tag / ele-
ment. 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. Border
Border style digunakan untuk membuat tampilan border pada
tag HTML. Contoh Border Style :
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
6
p.mix {border-style: dotted dashed solid double;}

</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to
display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>7
Lab. RPL Informatika ITN Malang 2021
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Hasil :
Gambar III.4 Hasil Css Border

4. Margin
Margin digunakan untuk mengatur jarak antara element pada
HTML. Untuk valuenya dapat menggunakan auto, px, % dan
lainnya.
a. Auto digunakan untuk mengatur secara otomatis.
b. Px untuk mengatur ukuran sesuai dengan kemauan sendiri.
c. % mengatur jarak menggunakan persen misal 30 %.
7
Contoh margin :
p {
margin-top: 100px;
margin-bottom: 100px;8
margin-right: 150px;
margin-left: 80px;
/* ----------------------- */
margin: 100px 150px 100px 80px;
margin: auto;
margin: 100px 150px;
margin: 100px 150px;
}
5. 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 auto, px, % dan lainnya.
a. Auto digunakan untuk mengatur secara otomatis.
b. Px untuk mengatur ukuran sesuai dengan kemauan sendiri.
c. % mengatur jarak menggunakan persen misal 30 %.
Contoh Padding :
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
/* ----------------------- */
padding: 50px 30px 50px 80px;
}
6. Height / Witdh
Height untuk mengatur tinggi 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;}
8
7. 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;9
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-indent: 50px;
text-decoration: underline;
text-decoration: line-through;
text-decoration: overline;
text-decoration: none;}
8. Font
Mendefinisikan font family, ketebalan, ukuran dan style dari sebuah
text pada tag HTML.
Contoh CSS Font :
p {
/*font face*/
font-family: "Times New Roman", Times, serif;
/*font style*/
font-style: normal;
font-style: italic;
font-style: oblique;
/*font sizing*/
font-size: 40px;
font-size: 2.5em; /* 40px/16=2.5em */
font-size: 100%;
/*bold*/
font-weight: normal;
font-weight: bold;
}
9
III.2 Langkah – Langkah Praktikum

1. Buka Text Editor
2. Menulis Script
III.3 Projek Praktikum : CatShop

1. Buat file Style.css
Source code :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 80%;
margin: 0 auto;
}
body {
font-family: "Poppins", sans-serif;
}
/* style navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding: 10px 0;
}
.list-menu a {
margin-left: 30px;
text-decoration: none;
color: black;
font-weight: 500;
font-size: 14px;
}
.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;
}
/* style jumbotron */
.jumbotron {
display: flex;
padding: 20px 0;
10
justify-content: space-around;
}
.jumbotron-text {
width: 30%;
font-weight: 500;
}
.jumbotron-text p {
color: white;
margin: 20px 0;
}
.jumbotron-text button {
padding: 10px 18px;
border: none;
background-color: white;
color: #ffb72b;
cursor: pointer;
}
/* style card-categories */
.cards-categories {
display: flex;
flex-direction: column;
}
.cards-categories h2 {
font-family: "Roboto", sans-serif;
}
.card-categories {
display: flex;
margin-top: 30px;
}
.card {
display: flex;
width: 30%;
box-shadow: 0 6px 12px 4px rgba(0, 0, 0, 0.15);
padding: 14px;
}
.card h5 {
margin: 10px 0;
font-size: 20px;
}
.card p {
font-size: 12px;
}
/* style page login */
.form-login {
display: flex;
width: 30%;
padding: 20px;
margin: 0 auto;
11

}
.input {
width: 100%;
margin: 10px 0;
padding: 10px;
border: 1px solid rgb(148, 148, 148);
}
2. Ubah file Index.html

Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect"
href="https://fonts.googleapis.com" />
href="https://fonts.gstatic.com" crossorigin
/>
<linkhref="https://fonts.googleapis.com/css2?
family=Poppins:wght@400;500;700&family=Roboto:wght@500;
700&display=swap"rel="stylesheet"
/>
</head>
<body>
<div class="container">
<div class="logo">
</div>
<div class="list-menu">
<a href="">Home</a>
<a href="login.html" class="btn_login"
style="color:
white">Login</a>
</div>
</div>
<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>
</div>
<div class="jumbotron-img">
<img src="assets/jumbotron.png" alt="" />
</div>
</div>
<h2>Cat Categories</h2>
12
<div class="card-categories">
<div class="card">
<img src="assets/anggora.png" alt="" />
<h5>Anggora</h5>
<p>
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>
</div>
<div class="card">
<img src="assets/persia.png" alt="" />
<h5>Persia</h5>
<p>
Kucing persia adalah ras kucing domestik
berbulu panjang dengan karakter wajah bulat dan moncong
pendek. Namanya mengacu pada
Persia.
</p>
</div>
<div class="card">
<img src="assets/british.png" alt="" />
<h5>British Shorthair</h5>
<p>
Kucing bulu pendek britania adalah salah
satu ras kucing tertua di inggris. Kucing ini adalah
kucing berbadan sedang dengan bulu yang pendek.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar III.1 Tampilan Web Browser CSS Catshop

13
3. Ubah file Login.html

Source code :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="logo">
</div>
<a href="index.html">Home</a>
<a href="" class="btn_login" style="color:
white">Login</a> </div>
</div>
<h3>Login</h3>
<form action="">
<input class="input"
type="text" name="username"
placeholder="Username"
/> <input class="input"
type="password" name="password"
/>
<button type="submit" class="btn_login"
name="login" id="login"> Login
</button>
</form>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar III.2 Tampilan Login Web Browser CSS Catshop

14
4. Buat file admin.css

Source code :
/* style sidebar */
* {
margin: 0;
padding: 0;
}
body {
}
.container {
display: flex;
width: 80%;
height: 600px;
margin: 50px auto;
}
.sidebar {
display: flex;
justify-content: center;
flex-basis: 15%;
}
.sidebar a {
color: white;
font-size: 15px;
font-weight: 500;
}
.right_content {
flex-basis: 80%;
}
.navbar {
display: flex;
height: 10%;
padding: 10px;
}
.btn {
border: none;
15
padding: 10px 20px;

font-size: 15px;
cursor: pointer;
color: white;
}
.btn a {
color: white;
}
.btn-tambah {
margin: 20px 0 0 40px;
}
.btn-simpan {
width: 100%;
}
.btn:hover {
background-color: #eba416;
}
.content {
height: 85%;
padding: 20px;
overflow: auto;
}
/* style for table */
.table-data {
text-align: center;
margin: 20px auto;
}
th,
td {
border: 1px solid black;
padding: 5px 20px;
}
/* style for form input */

.form-login {
display: flex;
width: 30%;
padding: 20px;
margin: 0 auto;
}
.input {
width: 100%;
16
margin: 10px 0;
padding: 10px;
}
5. Buat file Admin.html

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>Dashboard</title>
<link rel="stylesheet" href="css/admin.css" />
href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?
700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="sidebar">
<a href="">Home</a>
<a href="">Transaction</a>
</div>
<div class="right_content">
<button class="btn">Logout</button>
</div>
<div class="content">
<h2>Selamat Datang, Admin!</h2>
</div>
</div>
</div>
</body>
</html>
17
Hasil Tampilan :
Gambar III.3 Tampilan Admin Web Browser CSS Catshop

6. Buat file categories.html
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Categories</title>
<link rel="stylesheet" href="../css/admin.css" />
<link
700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<a href="../admin.html">Home</a>
<a href="categories.html">Categories</a>
<a href="../transaction/
transaction.html">Transaction</a>
</div>
<img src="../assets/logo.png" alt="" />
<button class="btn">
<a href="../logout.html">Logout</a>
</button>
</div>
18
<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 style="width: 30%">Photo</th>
<th>Categories</th>
<th style="width: 20%">Price</th>
<th style="width: 30%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="../assets/thumbnail/
anggora.png" alt="" /></td>
<td>Anggora</td>
<td>450000</td>
<td><a href="">Edit</a> | <a
href="">Hapus</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar III.4 Tampilan Categories Web Browser Catshop

7. Buat file categories-entry.html
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
19

<title>Categories Entry</title>
<link
700&display=swap"
rel="stylesheet"
/>
</head>
<body>
</div>
<a href="../logout/html">Logout</a>
</button>
</div>
<h3>Input Categories</h3>
<form action="">
<label for="categories">Categories</la-
bel>
<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="photo">Photo</label>
<input
type="file"
name="photo"
id="photo"
20
style="margin-bottom: 20px"
/>
<button type="submit" class="btn btn-sim-

pan" name="simpan">
Simpan
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar III.5 Tampilan Categories-Entry Web Browser Catshop

8. Buat file transaction.html
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<link
700&display=swap"
rel="stylesheet"
/>
</head>
<body>
21
<a href="../categories/categories.html">Cate-
gories</a>
<a href="transaction.html">Transaction</a>
</div>
</button>
</div>
<h3>Trasaction</h3>
<a href="transaction-entry.html">Tambah
Data</a>
</button>
<thead>
<tr>
<th style="width: 20%">Nama</th>
<th>Jenis Kucing</th>
<th style="width: 20%">Harga</th>
<th style="width: 20%">Tanggal</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Silva Tambunan</td>
<td>Anggora</td>
<td>450000</td>
<td>02-03-2022</td>
<td><a href="">Edit</a> | <a
href="">Hapus</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
22
Hasil Tampilan :
Gambar III.6 Tampilan Transaction Web Browser Catshop

9. Buat file transaction-entry.html
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<link
700&display=swap"
rel="stylesheet"
/>
</head>
<body>
gories</a>
</div>
</button>
</div>
23
<h3>Input Transaction</h3>
<form action="">
<label for="nama">Nama</label>
<input
class="input"
type="text"
name="nama"
id="nama"
placeholder="Nama"
/>
<label for="jenis">Jenis</label>
<input
class="input"
type="text"
name="jenis"
id="jenis"
placeholder="Jenis"
/>
<label for="harga">Harga</label>
<input
class="input"
type="text"
name="harga"
id="harga"
placeholder="Harga"
/>
<label for="tgl">Tanggal</label>
<input
class="input"
type="date"
name="tgl"
id="tgl"
/>

pan" name="simpan">
Simpan
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
24
Hasil Tampilan :
Gambar III.7 Tampilan Transaction Web Browser Catshop

III.4 Projek Rumah : Penyewaan Gitar
1. style.css
Source Code :
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
body {
}
/* style navbar */
.navbar {
display: flex;
padding: 10px 0;
}
.list-menu a {
margin-left: 30px;
color: black;
font-weight: 500;
font-size: 14px;
}
.btn_login {
background-color: #00e1ff;
width: 100%;
padding: 8px 16px;
border: none;
cursor: pointer;
color: white;
25
}
.btn_login:hover {
}
/* style jumbotron */
.jumbotron {
display: flex;
padding: 20px 0;
justify-content: space-around;
}
.jumbotron-text {
width: 30%;
font-weight: 500;
}
.jumbotron-text p {
color: white;
margin: 20px 0;
}
.jumbotron-text button {
padding: 10px 18px;
border: none;
color: #00e1ff;
cursor: pointer;
}
.cards-categories {
display: flex;
}
.cards-categories h2 {
}
.card-categories {
display: flex;
margin-top: 30px;
}
.card {
display: flex;
width: 30%;
padding: 14px;
}
.card h5 {
margin: 10px 0;
font-size: 20px;
}
.card p {
font-size: 12px;
}
26
.form-login {
display: flex;
width: 30%;
padding: 20px;
margin: 0 auto;
}
.input {
width: 100%;
margin: 10px 0;
padding: 10px;
}
2. index.html
<html lang="en">
<head>
<title>Home</title>
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"/>
</head>
<body>
<div class="logo"><img src="assets/LOGO1.png"
alt="" /></div>
<a href="">Home</a>
<a href="login.html" class="btn_login"
style="color:white">Login</a>
</div>
</div>
<div class="jumbotron-text">
<h1>Cheap and Quality Guitar Rental</h1>
<p>"Penyewaan gitar disini berkualitas, aman
dan terpercaya"</p>
<button type="button"
class="btn_getStarted">Get Started</button>
</div>
<div class="jumbotron-img">
<img src="assets/grup2.png" alt="" />
</div>
</div>
27
<h2>Guitar Categories</h2>
<div class="card-categories">
<div class="card">
<img src="assets/gitar classic.PNG"
alt="" />
<h5>Gitar Klasik</h5>
<p> Gitar spanyol, begitu memang biasanya
gitar klasik ini disebut,
karena memang tempat asalnya dari
Spanyol.
</p>
</div>
<div class="card">
<img src="assets/gitar resonator.png" alt=""
/>
<h5>Gitar Resonator</h5>
<p>Gitar resonator merupakan gitar akustik
yang suaranya berasal dari
satu atau lebih kerucut logam yang
berputar (resonator), bukan berbahan
kayu pada body bagian atasnya. Pada
gitar ini, kita juga tak akan menemukan
lubang suara karena telah digantikan
dengan piringan bundar yang berguna
untuk menyembunyikan resonator kerucut.
</p>
</div>
<div class="card">
<img src="assets/gitar baja.png" alt="" />
<h5>Gitar Baja</h5>
<p>Gitar baja ini berasal dari kebudayaan
orang-orang Hawaii.
Gitar ini memiliki beban yang cukup
berat jika dibandingkan dengan
gitar pada umumnya, sehingga cara
memainkannya pun harus dipangku.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
28
Hasil Tampilan :
Gambar III.2 Tampilan Home Web Browser CSS

4. login.html
<html lang="en">
<head>
</head>
<body>
<div class="logo">
<img src="assets/LOGO1.png" alt="" />
</div>
<a href="index.html">Home</a>
<a href="" class="btn_login"
style="color: white">Login</a>
</div>
</div>
<h3>Login</h3>
<form action="">
type="text" name="username"
placeholder="Username"/>
type="password" name="password"
placeholder="Password"/>
name="login" id="login">
Login</button>
</form>
</div></div>
</body>
</html>
29
Hasil Tampilan:
Gambar III.3 Tampilan login Web Browser

5. admin.html
<html lang="en">
<head>
/>
family=Poppins:wght@400;500;700&family=Roboto:wght@500;7
00&display=swap"
rel="stylesheet"
/>
</head>
<body>
<a href="">Home</a>
<a href="">Transaction</a>
</div>
<img src="assets/LOGO1.png" alt="" />
<button class="btn">Logout</button>
</div>
<h2>Selamat Datang, Admin!</h2>
</div>
</div>
</div>
</body>
</html>
30
Hasil Tampilan :
Gambar III.4 Tampilan Admin Web Browser

6. categories.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-
width, initialscale=1.0" />
href="https://fonts.gstatic.com" crossorigin/>
rel="stylesheet"/>
</head>
<body>
</div>
<img src="../assets/LOGO1.png" alt="" />
<a href="../
logout.html">Logout</a>
</button>
</div>
<h3>Categories</h3>
<button type="button" class="btn btn-
tambah">
31
<a href= "categories-

entry.html">Tambah Data </a>
</button>
<thead>
<tr>
<th style="width: 30%">
Photo </th>
<th>Categories</th>
Price </th>
Action </th>
</tr>
</thead>
<tbody>
<tr>
<td><img src= "../assets/
thumbnail/gitar classic.PNG" alt=""/></td>
<td>Gitar Klasik</td>
<td>125000 /6 jam</td>
<td><a href="">Edit</a> |
<a href="">Hapus</a></td>
</tr>
<tr>
<td><img src= "../assets/
thumbnail/gitar baja.png" alt=""/></td>
<td>Gitar Baja</td>
<td>100000 /6 jam</td>
<td><a href="">Edit</a> |
<a href= ""> Hapus</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar III.5 Tampilan Categoies Web Browser

32
7. categories-entry.html
<!DOCTYPE html>
<html lang="en">
<head>
700&display=swap"
rel="stylesheet"
/>
</head>
<body>
</div>
<img src="../gambar/sewa.png" alt="" />
</button>
</div>
<form action="">
bel>
<input
class="input"
type="text"
name="categories"
id="categories"
/>
<input
class="input"
type="text"
name="price"
id="price"
placeholder="Price"
/>
33
<input
type="file"
name="photo"
id="photo"
/>
pan" name="simpan">
Simpan
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar III.6 Tampilan Categoies-entry Web Browser

III.5 Kesimpulan
1. CSS adalah kepanjangan dari Cascading Style Sheets, yang berfungsi
untuk mengontrol tampilan dari sebuah halaman website. Dengan meng-
gunakan CSS, cukup satu kode untuk semua mark up yang sama pada
tag HTML.
2. CSS Penulisan dari CSS berbeda dengan HTML. Apabila HTML meng-
gunakan tag dan attribute, maka CSS menggunakan selector, dimana se-
lector memiliki declarations.
3. Terdapat 3 penempatan CSS yaitu Internal CSS, Eksternal CSS, dan In-
line CSS.
1
BAB IV
JAVASCRIPT
web.
html.
IV.1 Landasan Teori

A. Pengertian JavaScript
Javascript adalah bahasa pemrograman yang paling populer di
dunia. Javascript dapat mengubah isi dari HTML, dapat mengubah
atribut HTML, dapat mengubah styles (CSS), dapat pula mengenali
data input. Javascript juga berguna untuk design antar muka web yang
responsif.
B. Struktur
Penulisan Javascript diawali dengan <script> dan diakhiri </script>.
<script>
var a = “…”;
function name(){ statement;
}
</script>
C. Penempatan JavaScript
1. Section Head
Javascript dapat ditempatkan didalam head. Jika telah men-
empatkan di head disarankan agar tetap melanjutkan di head dan
tidak membuat javascript di body lagi.
Nama Aslab : TTD :

Nofia Hidayati
Tanggal :
2
<!DOCTYPE html>
<html>
<head>
<script> function myFunction() {
document.getElementById("demo").innerHTML =
"Paragraph changed."; }
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick =
"myFunction()">Try it</button>
</body>
</html>
2. Section Body
Javascript juga dapat ditempatkan di body. Tidak ada perbe-
daan dalam penempatan antara head dan body, tetapi lebih baik
javascript di body ditempatkan paling bawah sebelum tag penutup
body agar tidak memperlambat proses loading halaman web.
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
"Halooooo";
</script>
</body>
</html>
3. External JavaScript
Javascript juga dapat dibuat dalam file tersendiri, bedanya
hanya pada proses pemanggilan. File javascript menggunakan ek-
stensi .js. Untuk menggunakan Javascript external, tidak perlu
menulis tag <script> didalam file javascript, langsung saja ke
fungsi yang akan diimplementasikan ke dalam halaman web.
3
Keuntungan menggunakan Javascript External

a. Dapat membagi code antara html dan javascript
b. Dapat membuat code html dan javascript mudah dibaca
c. Dapat membuat file javascript diload lebih cepat.
D. Dasar Java Script
1. Output
Javascript Ouput merupakan keluaran dari hasil yang di cetak
didalam Javascript.
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTM
L = 5 + 6;\
</script>
</body></html>
2. Comment
Digunakan untuk memberi catatan pada source code. Contoh
single comment :
<script>
// Ini adalah Komentar Tunggal
</script>
Contoh multi comment
<script>
/*
Ini adalah contoh Komentar Yang mencakup banyak baris
*/
</script>
3. Variabel
Penulisan variabel menggunakan keyword var kemudian diikuti
nama variabel/identifier.
<script>
var x = 5; var y = 6;
var z = x + y;
"The value of z is: " + z;
</script>
4
4. Tipe Data
Tipe data dalam Javascript tidak perlu diidentifikasi hanya saja
penulisan yang harus benar.
var x = 5; //untuk number
var y = “6”; //untuk string
var z = x + y; //hasilnya akan menjadi 56
5. Operator
Operator Aritmatika Javascript.
a. Operator Aritmatika Javascript.
Tabel IV.1 Operator aritmatika
Operator Description
+ Addition
- Subtraction
*
Multiplication
/ Division
% Modulus (Remaiinder)
++ Increment
-- Decrement
b. Operator matematika
Tabel IV.2 Operator matematika
Operator Example Same As
- x= y x= y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
5
c. Operator Relasi
Tabel IV.3 Operator relasi
Operator Description
== Equal to
=== Equal value and equal type
!=
Not equal
!== Not equal value or not equal type
> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to
? Ternary operator
6. Function
Penulisan Javascript function membutuhkan keyword function
dan kemudian diikuti nama function().
function name(parameter1, parameter2, parameter3) {
code to be executed
//return x //if return value needed
}
Contoh :
<body>
<p id="demo"></p>
<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = "Hasil
dari
Fungsi : " + x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
IV.2 Langkah – Langkah Praktikum

1. Buka Text Editor
2. Menulis Script
6
IV.3 Projek Praktikum : CatShop

1. Buka file admin.html, tambahkan event onload pada body
Source code :
<body onload="myFunction()">
2. Tambahkan id = text pada h2 yang berada diclass content

Source code :
<h2 id="text">Selamat Datang, Admin!</h2>
</div>
3. Tambahkan script pada file admin.html

Source code :
<script>
function myFunction() {
let nama = prompt("Masukkan Nama Anda : ", "Ad-
min");
let jam = new Date().getHours();
if (nama != null) {
if (jam >= 4 && jam <= 10) {
document.getElementById("text").innerHTML =
`Selamat Pagi ${nama}`;
} else if (jam >= 11 && jam <= 14) {
`Selamat Siang ${nama}`;
} else if (jam >= 15 && jam <= 18) {
`Selamat Sore ${nama}`;
} else {
`Selamat Malam ${nama}`;
}
}
}
</script>
Hasil Tampilan :
7
Gambar IV.1 Tampilan admin.html
Analisa :
Pada source code htmlnya terdapat javascript yang ditempatkan
pada section body. Javascript ini terdapat function myFunction, dalam
function ini teradapat let variable nama yang digunakan untuk mengisi
nama di massage box pada saat halama di load atau onload ada juga let
variable jam untuk memberikan keterangan waktu. Ada percabangan if
dengan kondisi jika nama tidak kosong atau null akan menjalankan per-
cabangan if else di bawahnya. Ada if dengan kondisi jika jam >=4 dan
<= maka akan menampilkan selamat pagi dan memanggil variable
nama. Ada else if lainnya juga sama untuk menampilkan waktu sesuai
dengan kondisinya dan memanggil variable nama juga. Lalu pada tag
body ada event onload yaitu untuk menampilkan massage box saat hala-
man load dengan memanggil function myFucntion.
IV.4 Projek Rumah : Program Web Kalkulator

1. Index.html
Source code :
<html>
<head>
<title>kalkulator</title>
<script>
function dis(val) {
document.getElementById("result").value+=val
}
function solve() {
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
}
function clr() {
document.getElementById("result").value = ""
}
</script>

<style>
table{
border-radius: 2%;
box-shadow: 0px 6px 12px #000;
}
tr{
border-radius: 7%;
8
}
td{
width: 60px;
border-radius: 7%;
font-family: Verdana, Geneva, Tahoma, sans-
serif;
font-size: 20px;
color: aliceblue;
font-weight: bold;
}
input[type="button"]
{
height: 50px;
background-color:rgb(0, 170, 255);
color: white;
font-weight: bold;
font-size: 22px;
width:100%
}
.title{
height: 70px;
text-align:center;
border-radius: 2%;
width: 210px;
color:white;
}
input[type="text"]
{
font-size: 22px;
border-radius: 7%;
background-color:white;
height: 50px;
width:100%
}
input[type="button"].ekor{
}
input[type="button"].kode{
}
</style>
</head>
<body bgcolor="grey">
<table align="center" border="5" width="330px">
<tr>
<td colspan="4" class="title">Kalkulator</
td>
</tr>
<tr>
<td colspan="3"><input type="text" id="re-
sult"/></td>
<td><input class="ekor" type="button" value
= "C" onclick="clr()"/> </td>
</tr>
<tr>
<td><input type="button" value="1" onclick =
"dis('1')"/> </td>
9

"dis('2')"/> </td>
"dis('3')"/> </td>
<td><input class="kode" type="button" value=
"+" onclick="dis('+')"/> </td>
</tr>
<tr>
<td><input type="button" value="4" onclick=
"dis('4')"/> </td>
"dis('5')"/> </td>
"dis('6')"/> </td>
"-" onclick="dis('-')"/> </td>
</tr>
<tr>
"dis('7')"/> </td>
"dis('8')"/> </td>
"dis('9')"/> </td>
"/" onclick="dis('/')"/> </td>
</tr>
<tr>
<td><input type="button" value="." Onclick =
"dis('.')"/> </td>
"dis('0')"/> </td>
<td><input class="ekor" type="button" value=
"=" onclick="solve()"/> </td>
"x" onclick="dis('*')"/> </td>
</tr>
</table>
</body>
</html>
Hasil Tampilan :
10
Gambar IV.1 Tampilan Web Kalkulator
Analisa :
Program ini hanya berisi 1 file saja karena CSS yang digunakan
merupakan CSS internal, sehingga CSS terletak didalam kode HTML itu
sendiri. Pada bagian body memiliki warna abu-abu dengan table yang
berada di tengah, memiliki judul kalkulator, kolom pada tabel diga-
bungkan dengan perintah colspan, pada tabel data dengan tipe text
memiliki nilai dari 0 sampa 1 dan simbol aritmatik.
IV.5 Projek Rumah : Penyewaan Gitar
1. Buka file admin.html, tambahkan event onload pada body
Source code :
2. Tambahkan id = text pada h2 yang berada diclass content

Source code :
<h2 id="text">Selamat Datang, Admin!</h2>
</div>
3. Tambahkan script pada file admin.html

Source code :
<script>
let nama = prompt("Masukkan Nama Anda : ", "Ad-
min");
11
if (nama != null) {
if (jam >= 4 && jam <= 10) {
`Selamat Pagi ${nama}`;
} else if (jam >= 11 && jam <= 14) {
`Selamat Siang ${nama}`;
} else if (jam >= 15 && jam <= 18) {
`Selamat Sore ${nama}`;
} else {
`Selamat Malam ${nama}`;
}
}
}
</script>
12
Hasil Tampilan :
Gambar IV.1 Tampilan admin.html

Analisa :
Pada source code admin.html diatas dengan head yeng terdapat
tittle atau judul halaman dashboard yang melakukan preconnect dan
terhubung dengan admin.css. pada bagian body memiliki onload
function yang terdapat class container yang berisi class sidebar, pada
class sidebar membuat link aktif yakni home, categories dan
transaction. Dan terdapat juga logo, button logout. Pada class content
terdapat h2 dengan id text, kemudian script untuk memunculkan pop up
isi nama dan selamat pada waktu login saat itu pagi, siang, sore atau
malam.
IV.6 Kesimpulan
1. Javascript adalah bahasa pemrograman yang paling populer di dunia.
Javascript dapat mengubah isi dari HTML, dapat mengubah atribut
HTML, dapat mengubah styles (CSS), dapat pula mengenali data input.
2. Javascript juga berguna untuk design antar muka web yang responsif.
Penulisan Javascript diawali dengan <script> dan diakhiri </script>.
3. Terdapat tiga penempatan javascript yaitu Secition Head,Section Body,
dan Eksternal Javascript
1
BAB V
PHP DASAR DAN DATABASE
web.
html.
V.1 Landasan Teori

A. Pengertian PHP
PHP (PHP: Hypertext Preprocessor) merupakan salah satu
bahasa webscripting yang sangat powerful. Sejak pertama kali
diperkenalkan, bahasa ini dimaksudkan untuk menghasilkan halaman
halaman web yang dinamis. Hingga saat ini, PHP banyak sekali
digunakan dalam membuat aplikasi web, baik lokal maupun Internet
dinamis dan atraktif.Untuk dapat memprogramnya kita membutuhkan
suatu program web server local seperti XAMPP, WAMP dll.
B. Struktur PHP
Penulisan script PHP pasti diawali dengan <?php dan diakhiri
dengan ?>. Script PHP untuk menampilkan output di layar yaitu dengan
menggunakan echo dan script ditutup dengan tanda petik koma. Dalam
PHP, kita menggunakan // untuk menambah komentar 1 baris atau /*
dan */ untuk menambahkan komentar 1 blok. Extensi yang digunakan
haruslah .php.
Nama Aslab : TTD :

Nofia Hidayati
Tanggal :
2
C. Pengertian Database
Database adalah sekelompok data yang ditaruh secara sistematis
dalam perangkat komputer. Data yang ada pada database bisa diolah atau
juga dimanipulasi memakai program aplikasi tertentu. Tujuannya adalah
agar dapat menghasilkan informasi berguna di kemudian hari. Adapun
berbagai spesifikasi terkait database yaitu tipe datanya, struktur datanya
dan juga berbagai batasan yang ada pada data yang akan disimpan.
Database juga merupakan bagian yang amat penting dalam sebuah
sistem informasi. Karena database bisa berfungsi sebagai tempat
penyimpanan data-data penting yang nantinya akan diolah lagi untuk
keperluan di waktu yang akan datang. Database juga punya kemampuan
untuk mengorganisasikan seluruh data yang ada, mengenali jika ada data
duplikat, serta yang terpenting yaitu mencegah terbentuknya hubungan
antar data yang tidak membantu semacam data yang tdak terhubung dan
update yang rumit.
V.2 Langkah – Langkah Praktikum

1. Buka Text Editor
2. Menulis Script
V.3 Projek Praktikum : CatShop

1. Buka file baru dengan nama categories-proses.php
Source code :
<?php
include '../koneksi.php';
function upload() {
$namaFile = $_FILES['photo']['name'];
$error = $_FILES['photo']['error'];
$tmpName = $_FILES['photo']['tmp_name'];
// cek apakah tidak ada gambar yang diupload

if($error === 4) {
echo "
<script>
alert('Gambar Harus Diisi');
window.location = 'categories-en-
try.html';
</script>
";
3
return false;
}
// cek apakah yang diupload adalah gambar
$ekstentiGambarValid = ['jpg', 'jpeg', 'png'];
$ekstensiGambar = explode('.', $namaFile);
$ekstensiGambar = strtolower(end($ekstensiGambar));
if(!in_array($ekstensiGambar, $ekstentiGambarValid))
{
echo "
<script>
alert('File Harus Berupa Gambar');
try.html';
</script>
";
}
// lolos pengecekan, upload gambar
$namaFileBaru = uniqid();
$namaFileBaru .= '.';
$namaFileBaru .= $ekstensiGambar;
$oke = move_uploaded_file($tmpName, '../img_cate-

gories/' . $namaFileBaru);
return $namaFileBaru;
}
if(isset($_POST['simpan'])) {
$categories = $_POST['categories'];
$price = $_POST['price'];
$photo = upload();
$sql = "INSERT INTO tb_categories VALUES(NULL,
'$photo', '$categories', '$price')";
if(empty($categories) || empty($price)) {
echo "
<script>
alert('Pastikan Anda Mengisi Semua Data');
try.html';
</script>
";
}elseif(mysqli_query($koneksi, $sql)) {
echo "
<script>
alert('Data Categories Berhasil Ditam-
bahkan');
window.location = 'categories.php'
</script>
";
}else {
echo "
<script>
alert('Terjadi Kesalahan');
try.html'
</script>
";
}
}elseif(isset($_POST['edit'])) {
$id = $_POST['id'];
4
$photoLama = $_POST['photoLama'];
// cek apakah user pilih gambar atau tidak
if($_FILES['photo']['error']) {
$photo = $photoLama;
}else {
$photo = upload();
}
$sql = "UPDATE tb_categories SET
photo = '$photo',
categories = '$categories',
price = '$price'
WHERE id = $id
";
if(mysqli_query($koneksi, $sql)) {
echo "
<script>
alert('Data Categories Berhasil Diubah');
window.location = 'categories.php';
</script>
";
}else {
echo "
<script>
window.location = 'categories-edit.php';
</script>
";
}
}elseif(isset($_POST['hapus'])) {
$id = $_POST['id'];
$sql = "DELETE FROM tb_categories WHERE id = $id";
echo "
<script>
alert('Data Categories Berhasil Dihapus');
</script>
";
}else {
echo "
<script>
alert('Data Categories Gagal Dihapus');
</script>
";
}
}else {
header('location: categories.php');
}
5
Pada categories-entry.html, ubah tag form nya

Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"
/>
<link
00&display=swap"
rel="stylesheet"
/>
</head>
<body>
<a href="../transaction/transaction.html">Trans-
action</a>
</div>
</button>
</div>
<form
action="categories-proses.php"
method="post"
enctype="multipart/form-data"
>
<label for="categories">Categories</label>
<input
class="input"
type="text"
name="categories"
id="categories"
/>
6
<input
class="input"
type="text"
name="price"
id="price"
placeholder="Price"
/>
<input
type="file"
name="photo"
id="photo"
/>

pan" name="simpan">
Simpan
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
2. Buat file baru dengan nama transaction-proses.php

Source code :
<?php
$nama = $_POST['nama'];
$jenis = $_POST['jenis'];
$harga = $_POST['harga'];
$tanggal = $_POST['tgl'];
$sql = "INSERT INTO tb_transaction VALUES(NULL,

'$nama', '$jenis', '$harga', '$tanggal')";
$result = mysqli_query($koneksi, $sql);
// var_dump($result);
// var_dump($sql);
// var_dump($koneksi);
// die;
if(empty($nama) || empty($jenis) || empty($harga) ||

empty($tanggal)) {
echo "
<script>
alert('Pastikan Anda Mengisi Semua
Data');
window.location = 'transaction-en-
7
try.html';
</script>
";
echo "
<script>
alert('Data Transaction Berhasil Ditam-
bahkan');
window.location = 'transaction.php';
</script>
";
}else {
echo "
<script>
window.location = 'transaction-en-
try.html';
</script>
";
}
$id = $_POST['id'];
$tanggal= $_POST['tgl'];
$sql = "UPDATE tb_transaction SET

nama = '$nama',
jenis = '$jenis',
harga = '$harga',
tanggal = '$tanggal'
WHERE id = $id";
echo "
<script>
alert('Data Transaction Berhasil Di-
ubah');
</script>
";
}else {
echo "
<script>
window.location = 'transaction-ed-
it.php';
</script>
";
}
$id = $_POST['id'];
$sql = "DELETE FROM tb_transaction WHERE id = $id";
echo "
<script>
8
alert('Data Transaction Berhasil Diha-

pus');
</script>
";
}else {
echo "
<script>
alert('Data Transaction Gagal Dihapus');
window.location = 'transaction.php'
</script>
";
}
}else {
header('location: transaction.php');
}
?>
Pada transaction-entry.html, ubah tag form nya

Source code :
<!DOCTYPE html>
<html lang="en">
<head>
/>
<title>Transaction Entry</title>
<link
00&display=swap"
rel="stylesheet"
/>
</head>
<body>
gories</a>
</div>
</button>
</div>
9
<form action="transaction-proses.php"
method="post">
<input
class="input"
type="text"
name="nama"
id="nama"
placeholder="Nama"
/>
<input
class="input"
type="text"
name="jenis"
id="jenis"
placeholder="Jenis"
/>
<input
class="input"
type="text"
name="harga"
id="harga"
placeholder="Harga"
/>
<input
class="input"
type="date"
name="tgl"
id="tgl"
/>
pan" name="simpan">
Simpan
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
3. Ubah file admin.html, categories.html dan transaction.html

menjadi .php. dan jangan lupa untuk mengubah alamatnya pada tag <a
href>
10
4. Buat database dengan ketentuan :
Gambar V.1 db_2018066

5. Buat 4 tabel dengan field
Gambar V.2 tb_admin
Gambar V.3 tb_categories
Gambar V.4 tb_transaction

V.4 Projek Rumah : Penyewaan Gitar
1. categories-entri.php
<!DOCTYPE html>
<html lang="en">
<head>
/>
11

<link
00&display=swap"
rel="stylesheet" />
</head>
<body>
<a href="../transaction/transaction.html">Transac-
tion</a>
</div>
<img src="../gambar/sewa.png" alt=""
width="100px" />
</button>
</div>
<form action="transaction-proses.php" method="post"
enctype="multipart/form-data">
<input
class="input"
type="text"
name="categories"
id="categories"
/>
<input
class="input"
type="text"
name="price"
id="price"
placeholder="Price"
/>
<input
type="file"
name="photo"
id="photo"
/>
<button type="submit" class="btn btn-simpan"
name="simpan">
Simpan
</button>
12
</form>
</div>
</div>
</div>
</div>
</body>
</html>
2. categories-proses.php
<?php
echo
'Categories : ' . $categories .
'<br> Price : ' . $price ;
}
?>
3. transaction-entri.php
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin
/>
<link
rel="stylesheet"
/>
</head>
<body>
gories</a>
</div>
<img src="../assets/logo.png" alt=""
width="100px" />
</button>
13
</div>
<form action="transaction-proses.php"method=
"post">
<input
class="input"
type="text"
name="nama"
id="nama"
placeholder="Nama"
/>
<input
class="input"
type="text"
name="jenis"
id="jenis"
placeholder="Jenis"
/>
<input
class="input"
type="text"
name="harga"
id="harga"
placeholder="Harga"
/>
<input
class="input"
type="date"
name="tgl"
id="tgl"
/>
<button type="submit" class="btn btn-simpan"name=
"simpan">
Simpan
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
4. transaction-proses.php
<?php
14
echo
'Nama : ' . $nama .
'<br> Jenis : ' . $jenis .
'<br> Harga : ' . $harga .
'<br> Tanggal : ' . $tanggal;
}
?>
V.5 Kesimpulan
1. PHP (PHP: Hypertext Preprocessor) merupakan salah satu bahasa web-
scripting yang sangat powerful. Sejak pertama kali diperkenalkan, ba-
hasa ini dimaksudkan untuk menghasilkan halaman halaman web yang
dinamis.
2. Penulisan script PHP pasti diawali dengan <?php dan diakhiri dengan ?
>. Script PHP untuk menampilkan output di layar yaitu dengan menggu-
nakan echo dan script ditutup dengan tanda petik koma.
3. Database adalah sekelompok data yang ditaruh secara sistematis dalam
perangkat komputer.
1
BAB VI
PHP LOGIN DAN CRUD I
web.
html.
VI.1 Landasan Teori

PHP Adalah bahasa scripting server-side, Bahasa pemrograman yang
digunakan untuk mengembangkan situs web statis atau situs web dinamis
atau aplikasi Web. PHP singkatan dari Hypertext Pre-processor, yang
sebelumnya disebut Personal Home Pages.
Script sendiri merupakan sekumpulan instruksi pemrograman yang
ditafsirkan pada saat runtime. Sedangkan Bahasa scripting adalah bahasa
yang menafsirkan skrip saat runtime. Dan biasanya tertanam ke dalam
lingkungan perangkat lunak lain.Karena php merupakan i maka jenis bahasa
pemrograman ini nantinya script/program tersebut akan dijalankan/diproses
oleh server. Berbeda dengan javascript yang client-side.
PHP adalah bahasa pemrograman umum yang berarti php dapat
disematkan ke dalam kode HTML, atau dapat digunakan dalam kombinasi
dengan berbagai sistem template web, sistem manajemen konten web, dan
kerangka kerja web.
A. Fungsi Php
Fungsi PHP adalah membuat atau mengembangkan situs web statis
atau situs web dinamis atau aplikasi Web. Walaupun sebenarnya bukan
hanya PHP bahasa pemrograman yang bisa digunakan untuk memuat
Nama Aslab : TTD :
Nofia Hidayati
Tanggal :
2
website. PHP digunakan karena untuk membuat website dinamis bisa

digunakan untuk menyimpan data ke dalam database, membuat halaman
yang dapat berubah-ubah sesuai dengan input user, memproses form,
dll.
Dalam membuat file PHP dapat digabung menggunakan tag html,
Dan ketika tanpa menggunakan tag html apa pun disebut file PHP
Murni. Server menginterpretasikan kode PHP dan mengeluarkan
hasilnya sebagai kode HTML ke browser web. Agar server
mengidentifikasi kode PHP dari kode HTML, kita harus selalu
menyertakan kode PHP dalam tag PHP.
VI.2 Langkah – Langkah Praktikum

1. Buka Text Editor
2. Menulis Script
VI.3 Projek Praktikum : CatShop

1. Buat file baru dengan nama koneksi.php
Source code :
<?php
$servername = 'localhost';
$username = 'root';
$password = '';
$database = 'db_2018111';
// membuat koneksi
$koneksi = mysqli_connect($servername, $username, $pass-
word, $database);
// mengecek koneksi
if(!$koneksi) {
die('Connection Failed:' . mysqli_connect_error());
}
?>
2. Buat file baru dengan nama login-proses.php

Source code :
<?php
include 'koneksi.php';
if(isset($_POST['login'])) {
$username = $_POST['username'];
3
$password = $_POST['password'];
$sql = "SELECT * FROM tb_admin WHERE username =

'$username' AND password = '$password'";
if(mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
session_start();
$_SESSION['nama'] = $row['nama'];
header('location:admin.php');
}
}else {
echo "
<script>
alert('Username atau password anda salah,
Silahkan coba lagi');
window.location = 'login.php';
</script>
";
}
}
?>
3. Ubah tag form pada file login.html

Source code :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="logo">
</div>
<a href="index.php">Home</a>
<a href="" class="btn_login" style="color:
white">Login</a>
</div>
</div>
<h3>Login</h3>
<form action="login-proses.php" method="post">
<input
class="input"
type="text"
name="username"
placeholder="Username"
/>
<input
4
class="input"
type="password"
name="password"
/>
name="login" id="login">
Login
</button>
</form>
</div>
</div>
</body>
</html>
4. Ubah script yang ada di file admin.php

Source code :
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
00&display=swap"
rel="stylesheet"
/>
</head>
<a href="">Home</a>
<a href="categories/
categories.php">Categories</a>
<a href="transaction/transaction.php">Transac-
tion</a>
</div>
<a href="logout.php">Logout</a>
</button>
</div>
<h2 id="text"></h2>
<p>
5
<?php
session_start();
echo "Selamat Datang di Halaman Admin, " .
$_SESSION['nama'];
?>
</p>
</div>
</div>
</div>
<script>
if (jam) {
if (jam >= 4 && jam <= 10) {
`Selamat Pagi`;
} else if (jam >= 11 && jam <= 14) {
`Selamat Siang`;
} else if (jam >= 15 && jam <= 18) {
`Selamat Sore`;
} else {
`Selamat Malam`;
}
}
}
</script>
</body>
</html>
5. Ubah file admin.php

Source code :
<h2 id="text"></h2>
<p>
<?php
session_start();
echo "Selamat Datang di Halaman Admin, " .
$_SESSION['nama'];
?>
</p>
</div>
6. Buat file baru dengan nama logout.php

Source code :
<?php
session_start();
session_unset();
echo "
<script>
alert('Berhasil Logout');
</script>";
?>
6
7
7. Ubah isi dari transaction-proses.php

Source code :
<?php
$sql = "INSERT INTO tb_transaction VALUES(NULL,
'$nama', '$jenis', '$harga', '$tanggal')";
if(empty($nama) || empty($jenis) || empty($harga) ||

empty($tanggal)) {
echo "
<script>
window.location = 'transaction-entry.html';
</script>
";
echo "
<script>
alert('Data Transaction Berhasil Ditambahkan');
</script>
";
}else {
echo "
<script>
window.location = 'transaction-entry.html';
</script>
";
}
$id = $_POST['id'];
$tanggal= $_POST['tgl'];
$sql = "UPDATE tb_transaction SET
nama = '$nama',
jenis = '$jenis',
harga = '$harga',
tanggal = '$tanggal'
WHERE id = $id";
echo "
<script>
alert('Data Transaction Berhasil Diubah');
</script>
8
";
}else {
echo "
<script>
window.location = 'transaction-edit.php';
</script>
";
}
$id = $_POST['id'];
$sql = "DELETE FROM tb_transaction WHERE id = $id";
echo "
<script>
alert('Data Transaction Berhasil Dihapus');
</script>
";
}else {
echo "
<script>
alert('Data Transaction Gagal Dihapus');
window.location = 'transaction.php'
</script>
";
}
}else {
header('location: transaction.php');
}
?>
8. Buat file baru dengan nama transaction-edit.php

Source code :
<?php
$id = $_GET['id'];
if(!isset($_GET['id'])) {
echo "
<script>
alert('Tidak ada ID yang Terdeteksi');
</script>
";
}
$sql = "SELECT * FROM tb_transaction WHERE id =
'$id'";
$data = mysqli_fetch_assoc($result);
?>
<!DOCTYPE html>
<html lang="en">
<head>
/>
9

<title>Transaction Edit</title>
<link
00&display=swap"
rel="stylesheet"
/>
</head>
<body>
<a href="../admin.php">Home</a>
<a href="../categories/categories.php">Cate-
gories</a>
<a href="transaction.php">Transaction</a>
</div>
<a href="../logout.php">Logout</a>
</button>
</div>
<h3>Edit Transaction</h3>
<form
action="transaction-proses.php"
method="post"
>
<input type="hidden" name="id" value="<?=
$data['id'] ?>">
<input
class="input"
type="text"
name="nama"
id="nama"
placeholder="Nama"
value="<?= $data['nama'] ?>"
/>
<input
class="input"
type="text"
name="jenis"
id="jenis"
placeholder="Jenis"
value="<?= $data['jenis'] ?>"
/>
<input
10
class="input"
type="text"
name="harga"
id="harga"
placeholder="Harga"
value="<?= $data['harga'] ?>"
/>
<input
class="input"
type="date"
name="tgl"
id="tgl"
value="<?= $data['tanggal'] ?>"
/>
pan" name="edit">
Edit
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
9. Buat file baru dengan nama transaction-hapus.php

Source code :
<?php
$id = $_GET['id'];
echo "
<script>
</script>
";
}
'$id'";
?>
<!DOCTYPE html>
<html lang="en">
<head>
/>
<title>Transaction Hapus</title>
11
<link
00&display=swap"
rel="stylesheet"
/>
</head>
<body>
gories</a>
</div>
</button>
</div>
<h3>Hapus Transaction</h3>
<h4>Ingin Menghapus Data ?</h4>
<form
method="post"
>
$data['id'] ?>">

pan" name="hapus" style="width: 40%; margin-top: 50px;">
Yes
</button>
pan" name="tidak" style="width: 40%;">
No
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
12
10. Ubah isi dari transaction.php

Source code :
<!DOCTYPE html>
<html lang="en">
<head>
/>
<title>Transaction</title>
<link
00&display=swap"
rel="stylesheet"
/>
</head>
<body>
gories</a>
</div>
</button>
</div>
<h3>Trasaction</h3>
<a href="transaction-entry.html">Tambah Data</a>
</button>
<thead>
<tr>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
13
$sql = "SELECT * FROM tb_transaction";
while($data = mysqli_fetch_assoc($re-
sult)) {
echo "
<tr>
<td>$data[nama]</td>
<td>$data[jenis]</td>
<td>$data[harga]</td>
<td>$data[tanggal]</td>
<td><a href=transaction-edit.php?
id=$data[id]>Edit</a> |
<a href=transaction-hapus.php?
id=$data[id]>Hapus</a></td>
</tr>
";}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
VI.4 Projek Rumah : Penyewaan Gitar

A. Koneksi.php
<?php
$username = 'root';
$password = '';
$database = 'mobil_candragroup';
// membuat koneksi
$koneksi = mysqli_connect($servername, $username,
$password, $database);
// mengecek koneksi
if(!$koneksi) {
die('Connection Failed:' . mysqli_connect_er-
ror());
}
?>
Gambar VI.1 Koneksi database penyewaan_gitar

Analisa :
Pada source code diatas digunakan untuk mengambil data
username dan password dari database yang telah diinputkan di
14
$database, kemudian database yang diambil dari localhost akan

digunakan di file login.php
B. Login-proses.php
<?php
include 'koneksi.php';
if(isset($_POST['login'])) {
$username = $_POST['username'];
$password = $_POST['password'];
$sql = "SELECT * FROM tb_admin WHERE username =
'$username' AND password = '$password'";
if(mysqli_num_rows($result) > 0) {
while($row = mysqli_fetch_assoc($result)) {
session_start();
$_SESSION['nama'] = $row['nama'];
header('location:admin.php');
}
}else {
echo "
<script>
alert('Username atau password anda salah,
Silahkan coba lagi');
</script>
";
}
}
?>
Hasil Tampilan :
Gambar VI.2 Tampilan login admin

Analisa :
Pada source code diatas digunakan pada saat proses login yaitu
menginputkan username dan passwordyang sudah dibuat pada database
di localhost.
15
C. Admin.php
<!DOCTYPE html>
<html lang="en">
<head>
/>
<link
00&display=swap"
rel="stylesheet"
/>
</head>
<a href="">Home</a>
<a
href="categories/categories.php">Categories</a>
<a
href="transaction/transaction.php">Transaction</a>
</div>
<img src="assets/LOGO1.png"
alt="" />
<a href="logout.php">Logout</a>
</button>
</div>
<h2 id="text"></h2>
<p>
<?php
session_start();
echo "Selamat Datang di Halaman
Admin, " . $_SESSION['nama'];
if(!$_SESSION) {
header('location:
login.html');
}
?>
</p>
</div>
</div>
</div>
<script>

if (jam) {
if (jam >= 4 && jam <= 10) {
16
document.getElementById("text").innerHTML = `Selamat
Pagi`;
} else if (jam >= 11 && jam <= 14) {
Siang`;
} else if (jam >= 15 && jam <= 18) {
Sore`;
} else {
document.getElementById("text").innerHTML
= `Selamat Malam`;
}
}
}
</script>
</body>
</html>
Hasil Tampilan :
Gambar VI.3 Tampilan halaman admin

Analisa :
Pada source code diatas digunakan untuk mengecek data
username dan password yang sudah dibuat pada database localhost.
Kemudian akam ada ucapan selamat pagi, siang, sore atau malam
menyesuaikan pada saat waktu kita login.
D. Logout-proses.php
<?php
session_start();
session_unset();
echo "
<script>
alert('Berhasil Logout');
</script>
";
?>
Hasil Tampilan :
17
Gambar VI.4 Tampilan Logout

Analisa :
Pada source code diatas berfungsi untuk menampilkan pesan
yang telah disisipkan di program. Jika akun admin logout dari halaman
login, maka akan mengeluarkan pesan yang telah di program
E. Transaction.php
<!DOCTYPE html>
<html lang="en">
<head>
/>
<title>Trasaction</title>
<link
00&display=swap"
rel="stylesheet"
/>
</head>
<body>
<a
href="../categories/categories.html">Categories</a>
</div>
<img src="../gambar/sewa.png" alt="" />
</button>
</div>
<h3>Trasaction</h3>
18
<a href="transaction-entry.html">Tambah
Data</a>
</button>
<thead>
<tr>
<th>Jenis</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM tb_transaction";
while($data =
mysqli_fetch_assoc($result)) {
echo "
<tr>
<td>$data[nama]</td>
<td>$data[jenis]</td>
<td>$data[harga]</td>
<td>$data[tanggal]</td>
<td><a href=transaction-edit.php?
<a href=transaction-hapus.php?
id=$data[id]>Hapus</a></td>
</tr>
";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
19
Hasil Tampilan :
Gambar VI.5 Tampilan halaman input transaction
Gambar VI.6 Tampilan Data ditambahkan

F. Transaction-edit.php
<?php
$id = $_GET['id'];
echo "
<script>
</script>
";
}
'$id'";
?>
<!DOCTYPE html>
<html lang="en">
<head>
/>
20
<link
00&display=swap"
rel="stylesheet"
/>
</head>
<body>
gories</a>
</div>
</button>
</div>
<form
method="post"
>
$data['id'] ?>">
<input
class="input"
type="text"
name="nama"
id="nama"
placeholder="Nama"
value="<?= $data['nama'] ?>"
/>
<input
class="input"
type="text"
name="jenis"
id="jenis"
placeholder="Jenis"
value="<?= $data['jenis'] ?>"
/>
<input
class="input"
type="text"
name="harga"
21
id="harga"
placeholder="Harga"
value="<?= $data['harga'] ?>"
/>
<input
class="input"
type="date"
name="tgl"
id="tgl"
value="<?= $data['tanggal'] ?>"
/>
pan" name="edit">
Edit
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar VI.7 Tampilan halaman update data
Gambar VI.8 Tampilan Data setelah di update

Analisa :
Pada source code diatas digunakan untuk mengedit data
transaction, jika ada penulisan atau input data yang salah kita bisa
22
mengedit pada tabel action pada tampilan web nya. Kemudian setelah di
edit datamnya akan ada messagebox seperti gambar diatas.
G. Transaction-hapus.php
<?php
$id = $_GET['id'];
echo "
<script>
window.location = 'categories.html';
</script>
";
}
'$id'";
?>
<<!DOCTYPE html>
<html lang="en">
<head>
/>
<title>Trasaction</title>
<link
00&display=swap"
rel="stylesheet"
/>
</head>
<<body>
gories</a>
</div>
</button>
</div>
23
<form action="transaction-proses.php"
method="post" >
$data['id'] ?>">

pan" name="hapus" style="width: 40%; margin-top: 50px;">
Yes
</button>
No
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar VI.9 Tampilan halaman hapus data
Gambar VI.10 Tampilan data setelah dihapus

Analisa :
Pada source code diatas digunakan untuk mengedit data
transaction, jika ada penulisan atau input data yang salah kita bisa
mengedit pada tabel action pada tampilan webnya. Kemudian setelah
diedit datamnya akan ada messagebox seperti gambar diatas.
24
VI.5 Kesimpulan
1. PHP Adalah bahasa scripting server-side, Bahasa pemrograman yang
digunakan untuk mengembangkan situs web statis atau situs web
dinamis atau aplikasi Web. PHP singkatan dari Hypertext Pre-processor,
yang sebelumnya disebut Personal Home Pages.
2. Script sendiri merupakan sekumpulan instruksi pemrograman yang
ditafsirkan pada saat runtime. Sedangkan Bahasa scripting adalah
bahasa yang menafsirkan skrip saat runtime.
3. PHP adalah bahasa pemrograman umum yang berarti php dapat
disematkan ke dalam kode HTML, atau dapat digunakan dalam
kombinasi dengan berbagai sistem templat web, sistem manajemen
konten web, dan kerangka kerja web.
25
BAB VII
CRUD II DAN REPORT
web.
html.
VII.1 Landasan Teori

PHP Adalah bahasa scripting server-side, Bahasa pemrograman
yang digunakan untuk mengembangkan situs web statis atau situs web
dinamis atau aplikasi Web. PHP singkatan dari Hypertext Pre-processor,
yang sebelumnya disebut Personal Home Pages.
Script sendiri merupakan sekumpulan instruksi pemrograman yang
ditafsirkan pada saat runtime. Sedangkan Bahasa scripting adalah bahasa
yang menafsirkan skrip saat runtime. Dan biasanya tertanam ke dalam
lingkungan perangkat lunak lain. Karena php merupakan scripting server-
side maka jenis bahasa pemrograman ini nantinya script/program tersebut
akan dijalankan/diproses oleh server. Berbeda dengan javascript yang
client-side.
PHP adalah bahasa pemrograman umum yang berarti php dapat
disematkan ke dalam kode HTML, atau dapat digunakan dalam kombinasi
dengan berbagai sistem templat web, sistem manajemen konten web, dan
kerangka kerja web.
26
A. Fungsi Php
Fungsi PHP adalah membuat atau mengembangkan situs web
statis atau situs web dinamis atau aplikasi Web. Walaupun sebenarnya
bukan hanya PHP bahasa pemrograman yang bisa digunakan untuk
memuat website. PHP digunakan karena untuk membuat website
dinamis bisa digunakan untuk menyimpan data ke dalam database,
membuat halaman yang dapat berubah-ubah sesuai dengan input user,
memproses form, dll.
Dalam membuat file PHP dapat digabung menggunakan tag
html, Dan ketika tanpa menggunakan tag html apa pun disebut file
PHP Murni. Server menginterpretasikan kode PHP dan mengeluarkan
hasilnya sebagai kode HTML ke browser web. Agar server
mengidentifikasi kode PHP dari kode HTML, kita harus selalu
menyertakan kode PHP dalam tag PHP.
VII.2 Langkah – Langkah Praktikum

1. Buka Text Editor
2. Menulis Script
VII.3 Projek Praktikum : CatShop

1. Ubah isi dari categories-proses.php
Source code :
<?php
function upload() {
if($error === 4) {
echo " <script>
window.location = 'categories-entry.html';
</script> ";
return false;
}
if(!in_array($ekstensiGambar, $ekstentiGambarValid))
{
echo " <script>
27

</script> ";
}
$namaFileBaru = uniqid(); $namaFileBaru .= '.';
}
$price = $_POST['price']; $photo = upload();
$sql = "INSERT INTO tb_categories VALUES('',
'$photo', '$categories', '$price')";
echo " <script>
</script> ";
echo " <script>
alert('Data Categories Berhasil Ditambahkan');
</script> ";
}else {
echo " <script>
window.location = 'categories-entry.html'
</script> ";
}
$id = $_POST['id']; $categories = $_POST['cate-
gories'];
$photoLama = $_POST['photoLama'];
}else {
$photo = upload();
}
photo = '$photo', categories = '$categories',
price = '$price' WHERE id = $id ";
echo " <script>
</script> ";
}else {
echo " <script>
</script> ";
}
$id = $_POST['id'];
28
echo " <script>

</script> ";
}else {
echo " <script>
</script> ";
}
}else {
}
2. Buat file baru dengan nama categories-edit.php

Source code :
<?php
$id = $_GET['id'];
echo " <script>
</script> ";
}
$sql = "SELECT * FROM tb_categories WHERE id =
'$id'";
?>
<!DOCTYPE html>
<html lang="en">
<head>
/>
<title>Categories Edit</title>
700&display=swap"rel="stylesheet"/>
</head>
<body>
<a href="categories.php">Categories</a>
<a href="../transaction/transaction.php">Trans-
action</a>
</div>
29
<a href="../logout.php">Logout</a></button>
</div>
<h3>Edit Categories</h3>
<form action="categories-proses.php"
method="post" enctype="multipart/form-data">
$data['id'] ?>">
<input type="hidden" name="photoLama"
value="<?= $data['photo'] ?>">
bel>
<input class="input" type="text"
name="categories" id="categories"
value="<?= $data['categories'] ?>" />
name="price" id="price"
placeholder="Price"
value="<?= $data['price']?>" />
<img src="../img_categories/<?=
$data['photo'] ?>" alt="">
<input type="file" name="photo"
id="photo" style="margin-bottom: 20px" />
pan" name="edit"> Simpan </button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar VII.1 Tampilan Categories Edit catshop

30
3. Buat file baru dengan nama categories-hapus.php

Source code :
<?php
$id = $_GET['id'];
echo " <script>
</script> ";
}
'$id'";
?>
<!DOCTYPE html>
<html lang="en">
<head>
/>
<title>Categories Hapus</title>
family=Poppins:wght@400;500;700&family=Roboto:wght@500
;700&display=swap"
rel="stylesheet"/>
</head>
<body>
<div class="container"> <div class="sidebar">
transaction.php">Transaction</a>
</div>
<div class="right_content"> <div class="navbar">
<a href="../logout.php">Logout</a> </but-
ton>
</div>
<h3>Hapus Categories</h3>
<form action="categories-proses.php"
method="post" enctype="multipart/form-
data">
$data['id'] ?>">
31
<button type="submit" class="btn btn-

simpan" name="hapus" style="width: 40%; margin-top:
50px;">
Yes </button>
simpan" name="tidak" style="width: 40%;"> No </button>
</form> </div> </div> </div> </div>
</body>
</html>
Hasil Tampilan :
Gambar VII.2 Tampilan Categories hapus catshop

4. Ubah isi dari categories.php
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
700&display=swap"rel="stylesheet"/>
</head>
<body>
action</a>
</div>
<div class="right_content"> <div class="navbar">
32

<a href="../logout.php">Logout</a></button>
</div>
<div class="content"> <h3>Categories</h3>
Data</a> </button>
<table class="table-data"> <thead><tr>
<th>Categories</th>
</tr> </thead>
<tbody>
<?php
$sql = "SELECT * FROM tb_categories";
while($data = mysqli_fetch_assoc($re-
sult)) { echo " <tr> <td> <img src='../img_categories/
$data[photo]'> </td>
<td>$data[categories]</td>
<td>$data[price]</td>
<td> <a href=categories-edit.php?
id=$data[id]>Edit</a> | <a href=categories-hapus.php?
id=$data[id]>Hapus</a> </td>
</tr> "; } ?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar VII.3 Tampilan Categories Input catshop

33
5. Siapkan plugin dompdf, ekstrak dan copy plugin masukkan kedalam

folder xampp/htdocs/praktikum-catshop/
Gambar VII.4 Tampilan dompdf catshop

6. Tambahkan source code untuk button cetak pada file categories.php
Source code :
<button type="button" class="btn">
<a href="categories-cetak.php">Cetak</a>
</button>
7. Buat file baru dengan nama categories-cetak.php

Source code :
<?php
include('../koneksi.php');
require_once("../dompdf/autoload.inc.php");
use Dompdf\Dompdf;
$dompdf = new Dompdf();
$query = mysqli_query($koneksi, "select * from
tb_categories");
$html = '<center><h3>Daftar
Categories</h3></center><hr/><br>';
$html .= '<table border="1" width="100%">
<tr>
<th>No</th> <th>Categories</th>
<th>Price</th>
</tr>';
$no = 1;
while ($row = mysqli_fetch_array($query)) {
$html .= "<tr>
<td>" . $no . "</td>
<td>" . $row['categories'] . "</td>
<td>" . $row['price'] . "</td>
</tr>";
$no++;
}
$html .= "</html>";
$dompdf->loadHtml($html);
$dompdf->setPaper('A4', 'potrait');
$dompdf->render();
$dompdf->stream('laporan-categories.pdf');
34
Hasil Tampilan :
Gambar VII.5 Tampilan Categories catShop

8. Lakukan cetak data categories, apabila proses report berhasil maka
akan menghasilkan file pdf sebagai berikut
Hasil Tampilan :
Gambar VII.6 Tampilan Categories Cetak Catshop

VII.4 Projek Rumah : Penyewaan Gitar
1. Buat file baru dengan nama koneksi.php
Source code :
<?php
$username = 'root';
$password = '';
$database = 'penyewaan_gitar';
$koneksi = mysqli_connect($servername, $username,
$password, $database);
// mengecek koneksi
if(!$koneksi) {
die('Connection Failed:' . mysqli_connect_error());
}
?>
35
Analisa :
Source code di atas adalah source code yang digunakan untuk
menghubungkan database yang telah dibuat sebelumnya dari aplikasi
xampp. Disini saya membuat database “penyewaan_gitar”. Kemudian
dari masing masing field yang telah dibuat pada database akan dipang-
gil dan dijalankan pada file php yang memanggil database dari
“penyewaan_gitar”
2. Ubah isi dari categories-proses.php, yang berada di folder categories.
Source code :
<?php
function upload() {
// cek apakah tidak ada gambar yang diupload
if($error === 4) {
echo "
<script>
</script>
";
return false;
}
// cek apakah yang diupload adalah gambar
if(!in_array($ekstensiGambar, $ekstentiGambarValid)) {
echo "
<script>
</script>
";
}
// lolos pengecekan, upload gambar
$namaFileBaru = uniqid();
$namaFileBaru .= '.';
}
$photo = upload();
$sql = "INSERT INTO tb_categories VALUES('', '$photo',
'$categories', '$price')";
36
echo "
<script>
</script>
";
echo "
<script>
alert('Data Categories Berhasil Ditambahkan');
</script>
";
}else {
echo "
<script>
window.location = 'categories-entry.html'
</script>
";
}
$id = $_POST['id'];
$photo = $_POST['photo'];
// cek apakah user pilih gambar atau tidak
}else {
$photo = upload();}
photo = '$photo',
categories = '$categories',
price = '$price'
WHERE id = $id
";
echo "
<script>
</script>
";
}else {
echo "
<script>
</script>
";}
$id = $_POST['id'];
echo "
<script>
37
</script>
";
}else {
echo "
<script>
</script>
";}
}else {
}
Hasil Tampilan :
Gambar VII.1 Tampilan halaman tambah data categories.php
Gambar VII.2 Tampilan halaman categories.php

Analisa :
Source code di atas adalah source code pada categories-pros-
es.php yang digunakan untuk memproses data yang akan dimasukkan
kedalam tb_categories pada database penyewaan_gitar. Ketika user
mengisikan data pada tb_categories kemudian menekan button sim-
pan,maka data dan gambar akan diproses kemudian dimasukkan pada
database penyewaan_gitar.
38
3. Buat file baru bernama categories-edit.php, dan letakkan di folder cat-

egories.
Source code :
<?php
$id = $_GET['id'];
echo "
<script>
</script>
";
}
$sql = "SELECT * FROM tb_categories WHERE id = '$id'";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, ini-
tial-scale=1.0" />
<link rel="preconnect" href="https://fonts.gstatic.com"
crossorigin />
700&display=swap"rel="stylesheet"
/>
</head>
<body>
<a href="../transaction/transaction.php">Transac-
tion</a>
</div>
</button>
</div>
<form
39
method="post"
>
$data['id'] ?>">
<input type="hidden" name="photoLama" value="<?=
$data['photo'] ?>">
<input
class="input"
type="text"
name="categories"
id="categories"
value="<?= $data['categories'] ?>"
/>
<input
class="input"
type="text"
name="price"
id="price"
placeholder="Price"
value="<?= $data['price']?>"
/>
<img src="../img_categories/<?= $data
['photo'] ?>" alt="">
<input
type="file"
name="photo"
id="photo"
/>
<button type="submit" class="btn btn-simpan"
name="edit">
Simpan
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil tampilan :
40
Gambar VII.3 Tampilan Halaman Edit categories

Analisa :
Source code di atas adalah source code pada categories-edit.php.
Ketika user menginputkan data dan menekan button tambah,kemudian
menekan button simpan,maka categories.php akan memanggil tb_cat-
egories, kemudian data akan tersimpan pada tb_categories yang mas-
ing masing data akan tersimpan berdasarkan field yang dibuat.
4. Buat file baru bernama categories-hapus.php, dan letakkan di folder
categories.
Source code :
41
<?php
$id = $_GET['id'];
echo "
<script>
</script>
";
}
'$id'";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link
family=Poppins:wght@400;500;700&family=Roboto:wgh
t@500;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
action</a>
</div>
<img src="../assets/LOGO1.png" alt="" />
</button>
</div>
<form
method="post"
42
>
$data['id'] ?>">
pan" name="hapus" style="width: 40%; margin-top:
50px;">
Yes
</button>
No
</button>
</form>
</div></div>
</div></div>
</body>
</html>
43
Hasil tampilan :
Gambar VII.4 Tampilan Halaman hapus-categories.php

Analisa :
Source code di atas adalah source code pada categories-ha-
pus.php yang digunakan untuk menghapus data pada tabel cate-
gories.Jika user ingin menghapus data kemudian akan menampilkan
pilihan “Ingin Menghapus Data?” jika menekan button yes maka data
akan terhapus dari tb_categories, Ketika user menekan no,maka akan
diarahkan ke halaman categories.php
5. Ubah isi dari categories.php, yang berada di folder categories.
Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<link
700&display=swap"
rel="stylesheet"
/>
</head>
<body>
44
<a
href="../transaction/transaction.php">Transaction</a>
</div>
<img src="gambar/sewa.png" alt="" />
</button>
</div>
<h3>Categories</h3>
Data</a>
</button>
<thead>
<tr>
<th>Categories</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM tb_categories";
while($data =
mysqli_fetch_assoc($result)) {
echo "
<tr>
<td>
<img
src='../img_categories/$data[photo]'width = '300px'>
</td>
<td>$data[categories]</td>
<td>$data[price]</td>
<td>
<a href=categories-edit.php?
<a href=categories-hapus.php?
id=$data[id]>Hapus</a>
</td>
</tr>
";}
?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
45
6. Siapkan Plugin dompdf, Ekstrak dan Copy plugin dompdf yang sudah
didownload ke dalam folder xampp/htdocs/Bab7/
Gambar VII.5 Tampilan dompf pada file xampp

7. Tambahkan source code untuk button cetak pada file categories.php:
Source code :
</button>
Analisa :
Source code di atas adalah source code pada file categories.php
yang digunakan untuk button cetak. Jika button cetak di klik maka web
akan mengarahkan pada halaman web categories-cetak.php. Setelah itu
user diarahkan untuk mendownload file cetaknya dalam bentuk pdf.
8. Buat file baru dengan nama categories-cetak.php, kemudian tam-
bahkan source code dibawah ini :
Source code :
<?php
include('../koneksi.php');
require_once("../dompdf/autoload.inc.php");
use Dompdf\Dompdf;
$dompdf = new Dompdf();
$query = mysqli_query($koneksi, "select * from
tb_categories");
$html = '<center><h3>Daftar
Categories</h3></center><hr/><br>';
$html .= '<table border="1" width="100%">
<tr>
<th>No</th>
46
<th>merk</th>
<th>Price</th>
</tr>';
$no = 1;
while ($row = mysqli_fetch_array($query)) {
$html .= "<tr>
<td>" . $no . "</td>
<td>" . $row['merk'] . "</td>
<td>" . $row['price'] . "</td>
</tr>";
$no++;
}
$html .= "</html>";
$dompdf->loadHtml($html);
// Setting ukuran dan orientasi kertas
$dompdf->setPaper('A4', 'potrait');
// Rendering dari HTML Ke PDF
$dompdf->render();
// Melakukan output file Pdf
$dompdf->stream('laporan-categories.pdf');
Analisa :
Source code di atas adalah source code pada categories-
cetak.php yang digunakan untuk mencatek file data categories. Terda-
pat perintah include yang digunakan untuk menyertakan file php lain
agar saling terhubung. Disini terdapat source code untuk memanggil
plugin dompdf. Lalu terdapat query select * from tabel yang dituju un-
tuk menyeleksi data tabel categories di database. Ada tag tabel untuk
membuat tabel nama gitar dan harganya. Source code ini jika dibuka
maka user akan diarahkan untuk mendownload file berupa pdf.
Hasil Tampilan :
Gambar VII.6 Tampilan Halaman cetak

47
VII.5 Kesimpulan
1. PHP Adalah bahasa scripting server-side, Bahasa pemrograman yang
digunakan untuk mengembangkan situs web statis atau situs web
dinamis atau aplikasi Web. PHP singkatan dari Hypertext Pre-
processor, yang sebelumnya disebut Personal Home Pages.
2. Script sendiri merupakan sekumpulan instruksi pemrograman yang
ditafsirkan pada saat runtime. Sedangkan Bahasa scripting adalah
bahasa yang menafsirkan skrip saat runtime.
3. PHP adalah bahasa pemrograman umum yang berarti php dapat
disematkan ke dalam kode HTML, atau dapat digunakan dalam
kombinasi dengan berbagai sistem templat web, sistem manajemen
konten web, dan kerangka kerja web.
1
BAB VIII
FRAMEWORK
Tujuan Praktikum : 1. Mampu memahami konsep MVC pada frame-
work Laravel.
2. Mampu mengkofiguransi framework Laravel.
3. Mampu menghubungkan Laravel dengan data-
base.
VIII.1 Landasan Teori

A. Pengenalan Konsep MVC (Model, View, Controller)
Gambar VIII.1 MVC

MVC membagi aplikasi ke dalam tiga bagian fungsional : Model,
View dan Controller.
1. Model : adalah kode-kode untuk model bisnis dan data. biasanya
berhubungan langsung dengan database untuk memanipulasi data
(insert, update, delete, search), menangani validasi dari bagian
controller, namun tidak dapat berhubungan langsung dengan
bagian view.
Nama Aslab : TTD :

Nofia Hidayati
Tanggal :
2
2. View : merupakan bagian yang menangani presentation logic.

berisi kode-kode untuk tampilan.
3. Controller : merupakan bagian yang mengatur hubungan antara
bagian model dan bagian view, controller berfungsi untuk mener-
ima request dan data dari user kemudian menentukan apa yang
akan diproses oleh aplikasi.
B. Konfigurasi Laravel
Laravel is a web application framework with expressive, elegant syn-
tax. (Laravel.com)
1. Install composer terlebih dahulu
https://www.malasngoding.com/cara-install-composer/
2. Membuat laravel menggunakan composer
composer create-project laravel/laravel example-app
3. Untuk menjalankan laravel gunakan cmd atau gitbash dan ketikan
baris code dibawah ini
Php artisan serve
C. Jenis Framework untuk Web Development

Setelah mengenal apa itu framework beserta fungsinya, selanjut-
nya kita akan mengenal beberapa contoh yang digunakan dalam
pengembangan website. Berikut ini merupakan beberapa jenis frame-
work meliputi CSS, JavaScript, dan PHP. Dan biasanya sering digu-
nakan dalam pengembangan sebuah website.
1. Framework CSS
CSS (Cascading Style Sheet) merupakan bahasa pemrogra-
man yang digunakan untuk membuat tampilan, layout pada HTML
agar lebih bagus dan menarik. CSS selalu digunakan untuk tim
front end dalam membuat tampilan website. Berikut merupakan
beberapa kerangka kerja dari CSS.
a. Bootstrap
Bootstrap merupakan framework CSS yang sering digu-
nakan para developer. Tampilan bootstrap memberikan kesan
modern, dinamis, dan lebih user friendly. Selain itu, menyedi-
akan tampilan yang responsive saat diakses melalui ponsel.
3
b. Foundation
Framework ini banyak digunakan karena memiliki
kelebihan dalam hal fungsionalitasnya. Foundation dapat bek-
erja dalam segala browser serta kaya akan fitur sama seperti
Bootstrap.
c. Semantic UI
Semantic UI memiliki kelebihan dalam hal penulisan
class yang lebih mudah. Selain itu, framework yang satu ini
juga menyediakan fitur yang user friendly dan komponen yang
lengkap.
d. Bulma
Banyak pengembang yang belum mengenal Bulma. Na-
mun, framework ini memiliki keistimewaan dalam hal tata
letaknya yang berbasis flexbox, sehingga memudahkan devel-
oper dalam mengatur tampilan dalam bentuk responsive.
e. Materialize
Salah satu hal yang menarik pada framework yang satu
ini adalah dapat digunakan pada website secara umum serta
platform Android. Tentu saja dalam hal ini juga mencakup
tampilan yang responsive serta memiliki fitur yang banyak.
2. Framework Javascript
JavaScript (JS) merupakan bahasa pemrograman yang digu-
nakan oleh front end dalam membuat tampilan website menjadi
lebih interaktif. Website yang kompleks tentu saja harus mem-
berikan performa dan pengalaman yang baik bagi pengguna. Den-
gan menggunakan JavaScript, maka website akan terlihat lebih di-
namis. JavaScript sendiri merupakan bahasa yang berjalan pada
sisi front end dan tergolong dalam bahasa pemrograman tingkat
tinggi. Kemudian, dapat berjalan di sisi front end maupun back
end. Berikut ini merupakan beberapa framework dari JS.
a. AngularJS
4
AngularJS merupakan framework JavaScript yang ber-

jalan di sisi client dengan menggunakan pola MVC untuk
membuat tampilan website lebih dinamis. Untuk sekarang, An-
gularJS bersifat open source dan sepenuhnya didasarkan pada
HTML dan JavaScript. Yang mana, dapat mengubah HTML
statis menjadi HTML yang dinamis.
b. ReactJS
Merupakan kerangka kerja yang dikembangkan oleh
Facebook. ReactJS termasuk dalam library front end yang
memungkinkan untuk membuat komponen UI dapat digunakan
kembali. Salah satu kelebihan dari React adalah dapat digu-
nakan secara multi platform (website maupun mobile).
c. Vue.js
Vue.js merupakan framework yang bersifat open source
dan progresif untuk membangun antarmuka (interface) peng-
guna. Kelebihannya terletak pada proses integrasi dalam
proyek menggunakan library JavaScript yang dibuat lebih mu-
dah.
d. Node.js
Node.js berjalan di sisi backend (server) yang bersifat
open source, cross-platform dalam mengeksekusi kode.
Node.js juga memungkinkan developer dalam menggunakan
JavaScript untuk membuat konten halaman pada web secara di-
namis sebelum dikirim ke web browser pengguna (user).
e. EmberJS
Mengadopsi pola MVVM (Model – View – View –
Model). Artinya, developer dapat mengembangkan website dan
ditingkatkan sesuai dengan kebutuhan. Selain itu, EmberJS
juga termasuk dalam framework JavaScript yang bersifat open
source.
3. Framework PHP
5
PHP (Hypertext Preprocessor) merupakan bahasa pemrogra-

man tingkat tinggi yang berjalan pada sisi server dan selalu digu-
nakan oleh tim back-end. Berikut ini merupakan beberapa frame-
work PHP yang sering digunakan dalam pengembangan website.
a. CodeIgniter (CI)
CodeIgniter merupakan framework PHP yang menggu-
nakan arsitektur berbasis MVC. Lebih spesifiknya, pada CI
menggunakan komponen yang berbeda untuk mengelola tugas
pengembangan website. Keunggulan dari CI terletak pada per-
formanya yang ringan dan dapat diandalkan.
b. Laravel
Laravel merupakan salah satu framework PHP yang
memiliki sintaks yang mudah dipahami dan digunakan. Kemu-
dian, Laravel juga terintegrasi dengan library dan platform pi-
hak ketiga, yaitu AWS (Amazon Web Services). Dan yang pal-
ing penting disini, dari segi performa memiliki core yang dapat
diandalkan dengan menggunakan add – ons.
c. Symfony
Framework ketiga yang sering digunakan adalah Sym-
fony. Dari nama saja cukup unik, pun memiliki fleksibilitas
yang baik. Keunggulan utama apabila anda menggunakan
framework ini adalah telah tersedia fungsionalitas testing
bawaan untuk mengecek apakah program berjalan dengan nor-
mal atau tidak.
d. Phalcon
Phalcon memiliki perbedaan dari segi penulisan kode
program. Dalam hal ini, menggunakan bahasa C ekstensi dari
PHP. Phalcon juga merupakan framework PHP tercepat dan
memiliki performa yang baik.
6
e. Zend
Zend merupakan framework yang berparadigma OOP
(Object Oriented Programming) yang berarsitektur MVC.
Fungsionalitas pada Zend memudahkan anda untuk fokus pada
komponen dan fungsi yang dibutuhkan. Karena sifatnya yang
berbasis komponen, Zend banyak disebut sebagai kerangka
kerja “Glue”.
VIII.2 Langkah – Langkah Praktikum

1. Buka Text Editor
2. Menulis Script
3. Buka file .php pada browser
VIII.3 Projek Praktikum : CatShop

1. categories.blade.php
source code :
<!DOCTYPE html>
<html lang="en">
<head>
<link
700&display=swap"
rel="stylesheet"
/>
</head>
<body>
action</a>
</div>
7

</button>
</div>
<h3>Categories</h3>
<a href="/categories/tambah">Tambah Data</
a>
</button>
</button>
<thead>
<tr>
<th>Categories</th>
</tr>
</thead>
<tbody>
@foreach ($categories as $categorie)
<tr>
<td><img src="{{ url('/gambar_cate-
gories/'.$categorie->gambar) }}" alt=""></td>
<td>{{ $categorie->nama }}</td>
<td>{{ $categorie->harga }}</td>
<td>
<a href="/categories/edit/{{ $cat-
egorie->id_categories }}">Edit</a>
<a href="/categories/hapus/
{{ $categorie->id_categories }}">Hapus</a>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
8
Hasil Tampilan :
Gambar VIII.1 Categories

2. Categories-entry.blade.php
source code :
<!DOCTYPE html>
<html lang="en">
<head>
<link
family=Poppins:wght@400;500;700&family=Roboto:wght@500
;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
transaction.php">Transaction</a>
</div>
</button>
</div>
9
<form
action="{{ url('/categories/upload') }}"
method="post"
>
{{ csrf_field() }}
bel>
<input
class="input"
type="text"
name="nama"
id="categories"
/>
<input
class="input"
type="text"
name="harga"
id="price"
placeholder="Price"
/>
<input
type="file"
name="gambar"
id="photo"
/>

simpan" name="simpan">
Simpan
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
10
Hasil Tampilan :
Gambar VIII.2 Categories-Entry

3. Categories-edit.blade.php
source code :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ asset('/css/ad-
min.css') }}" />
<link
700&display=swap"
rel="stylesheet"
/>
</head>
<body>
action</a>
</div>
<img src="{{ asset('/assets/logo.png') }}"
alt="" />
11
</button>
</div>
<form
action="{{ url('/categories/update/'.
$categories->id_categories) }}"
method="post"
>
{{ csrf_field() }}
{{ method_field('PUT') }}
bel>
<input
class="input"
type="text"
name="nama"
id="categories"
value="{{ $categories->nama }}"
/>
<input
class="input"
type="text"
name="harga"
id="price"
placeholder="Price"
value="{{ $categories->harga }}"
/>
<img src="{{ asset('/gambar_categories/'.
$categories->gambar) }}" alt="">
<input
type="file"
name="gambar"
id="photo"
value="{{ asset('gambar_categories/'.
$categories->gambar) }}"
/>
pan" name="edit">
Simpan
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil tampilan :
12
Gambar VIII.3 Categories-edit

4. Categories-hapus.blade.php
source code :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{ asset('/css/ad-
min.css') }}" />
700&display=swap"
rel="stylesheet"
/>
</head>
<body>
action</a>
</div>
</button>
</div>
13

pan" name="hapus" style="width: 40%; margin: 20px auto
0">
<a href="{{ url('/categories/delete/'.
$categories->id_categories) }}">Yes</a>
</button>
pan" name="tidak" style="width: 40%; margin: 20px auto
0">
<a href="{{ url('/categories/
noDelete') }}">No</a>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar VIII.4 Categories-hapus

5. web.php
source code :
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CategoriesController;
use App\Http\Controllers\TransactionController;
/*
|------------------------------------------------------
--------------------
| Web Routes
|------------------------------------------------------
--------------------
|
| Here is where you can register web routes for your
application. These
| routes are loaded by the RouteServiceProvider within
a group which
14
| contains the "web" middleware group. Now create some-

thing great!
|
*/
Route::get('/', function () {
return view('index');
});
//categories
Route::get('/categories', [CategoriesController::class,
'tampil']);
Route::get('/categories/tambah', [CategoriesCon-
troller::class, 'tambah']);
Route::post('/categories/upload', [CategoriesCon-
troller::class, 'upload']);
Route::get('/categories/edit/{id_categories}', [Cate-
goriesController::class, 'edit']);
Route::put('/categories/update/{id_categories}', [Cate-
goriesController::class, 'update']);
Route::get('/categories/hapus/{id_categories}', [Cate-
goriesController::class, 'hapus']);
Route::get('/categories/delete/{id_categories}', [Cate-
goriesController::class, 'delete']);
Route::get('/categories/noDelete', [CategoriesCon-
troller::class, 'noDelete']);
6. CategoriesController.php
source code :
<?php
namespace App\Http\Controllers;
use App\Models\Category;
use Illuminate\Http\Request;
class CategoriesController extends Controller

{
public function tampil(){
$categories = Category::all();
return view('categories.categories',
compact('categories'));
// return view('categories.categories');
}
public function tambah(){
return view('categories.categories-entry');
}
// function untuk insert data
function upload(Request $request) {
$this->validate($request, [
'nama' => 'required',
'harga' => 'required',
'gambar' => 'file|image|
mimes:jpeg,png,jpg:max:2048'
]);
$gambar = $request->file('gambar');
$nama_gambar = time()."_".$gambar->getClientO-
riginalName();
$simpan_gambar = 'gambar_categories';
$gambar->move($simpan_gambar, $nama_gambar);
15
Category::create([
'nama' => $request->nama,
'harga' => $request->harga,
'gambar' => $nama_gambar
]);
return redirect('/categories');
}
function edit($id_categories) {
$categories = Category::find($id_categories);
return view('categories.categories-edit', com-
pact('categories'));
}
// update data ke database
function update($id_categories, Request $request) {
'gambar' => 'file|image|
mimes:jpeg,png,jpg:max:2048'
]);
$categories->nama = $request->nama;
$categories->harga = $request->harga;
if($request->hasfile('gambar'))
{ File::delete('gambar_categories/'.
$categories->gambar);
$gambar = $request->file('gambar');
$nama_gambar = time()."_".$gambar->get-
ClientOriginalName();
$simpan_gambar = 'gambar_categories';
$gambar->move($simpan_gambar, $nama_gam-
bar);
$categories->gambar = $nama_gambar;
}
$categories->save();
}
function hapus($id_categories) {
return view('categories.categories-hapus', com-
pact('categories'));
}
function delete($id_categories) {
// hapus file
File::delete('gambar_categories/'.$categories-
>gambar);
// hapus data
$categories->delete();
}
function noDelete() {
}
}
16
VIII.4 Projek Rumah : CatShop

1. transaction.blade.php
source code :
<!DOCTYPE html>
<html lang="en">
<head>
initialscale=1.0" />
<title>Transaction</title>
0&family=Roboto:wght@500;700&display=swap"
rel="stylesheet" />
</head>
<body>
<a href="../categories/categories.php">Cat-
egories</a>
</div>
</button>
</div>
<h3>Trasaction</h3>
<button type="button" class="btn btn-
tambah">
<a href="{{ url ('/transaction/tambah')
}}">Tambah Data</a>
</button>
<thead>
<tr>
<th style="width: 20%">Nama
</th>
<th style="width: 20%">Harga
</th>
<th style="width: 20%">Tanggal
</th>
<th>Action</th>
</tr>
17
</thead>
<tbody>
@foreach ($transaction as $tr)
<td>{{ $tr->nama }}</td>
<td>{{ $tr->jenis }}</td>
<td>{{ $tr->harga }}</td>
<td>{{ $tr->tgl }}</td>
<td>
<a href="/transaction/
edit/{{ $tr->id_transaction }}">Edit</a>
<a href="/transaction/ha-
pus/{{ $tr->id_transaction }}">Hapus</a>
</td>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar VIII.1 transaction

2. transaction-entry.blade.php
source code :
<!DOCTYPE html>
<html lang="en">
<head>
18
rel="stylesheet" />
</head>
<body>
<a href="../categories/
<a href="{{ url('/transaction/
tambah') }}">Transaction</a>
</div>
<img src="../assets/logo.png"
alt="" />
</button>
</div>
<form action="{{ url('/
transaction/upload') }}" method="POST">
{{ csrf_field() }}
name="nama" id="nama" placeholder="Nama" />
name="jenis" id="jenis" placeholder="Jenis" />
name="harga" id="harga" placeholder="Harga" />
type="date" name="tgl" id="tgl" style="margin-bottom:
20px" />
<button type="submit" class="btn
btn-simpan" name="simpan">
Simpan
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
19
Hasil Tampilan :
Gambar VIII.2 transaction -Entry

3. transaction-edit.blade.php
source code :
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{{asset('/css/ad-
min.css')}}" />
rel="stylesheet" />
</head>
<body>
<a href="../categories/
</div>
<img src="../assets/logo.png"
alt="" />
</button>
</div>
20
<form action="{{ url('/transac-
tion/update/'.$transaction->id_transaction) }}"
method="post">
{{ csrf_field() }}
{{ method_field('PUT') }}
<input type="hidden" name="id"
value="{{ $transaction->id_transaction }}">
type="text" name="nama" id="nama" placeholder="Nama"
value="{{ $transaction->nama }}" />
<label for="jenis">Jenis</la-
bel>
type="text" name="jenis" id="jenis" placeholder="Je-
nis" value="{{ $transaction->jenis }}" />
<label for="harga">Harga</la-
bel>
type="text" name="harga" id="harga"
placeholder="Harga" value="{{ $transaction-
>harga }}" />
<label for="tgl">Tanggal</la-
bel>
type="date" name="tgl" id="tgl" style="margin-bottom:
20px" value="{{ $transaction->tgl }}" />
<button type="submit"
class="btn btn-simpan" name="edit">
Edit
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
21
Gambar VIII.3 Transaction-edit
4. transaction-hapus.blade.php
source code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transaction Hapus</title>
<link rel="stylesheet" href="{{ asset("/css/ad-
min.css") }}" />
rel="stylesheet" />
</head>
<body>
<a href="../categories/categories.php">Cat-
egories</a>
</div>
<img src="{{ asset("/assets/
logo.png") }}" alt="" />
</button>
</div>
<form action="{{ url('/
transaction/delete/'. $transaction->id_transaction) }}"
method="get">
<input type="hidden" name="id"
value="" />
class="btn btn-simpan" name="hapus" style="width: 40%;
margin-top: 50px;">
Yes
</button>
22
class="btn btn-simpan" name="tidak" style="width:

40%;">
<a href="{{ url('/transac-
tion/noDelete') }}">No</a>
</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Hasil Tampilan :
Gambar VIII.4 transtion-hapus

5. web.php
source code :
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CategoriesController;
use App\Http\Controllers\TransactionController;
/*
|------------------------------------------------------
--------------------
| Web Routes
|------------------------------------------------------
--------------------
|
| Here is where you can register web routes for your
application. These
| routes are loaded by the RouteServiceProvider within
a group which
| contains the "web" middleware group. Now create some-
thing great!
|
*/
Route::get('/', function () {
return view('index');
23
});
//categories
Route::get('/categories', [CategoriesController::class,
'tampil']);
Route::get('/categories/tambah', [CategoriesCon-
Route::post('/categories/upload', [CategoriesCon-
Route::get('/categories/edit/{id_categories}', [Cate-
goriesController::class, 'edit']);
Route::put('/categories/update/{id_categories}', [Cate-
goriesController::class, 'update']);
Route::get('/categories/hapus/{id_categories}', [Cate-
goriesController::class, 'hapus']);
Route::get('/categories/delete/{id_categories}', [Cate-
goriesController::class, 'delete']);
Route::get('/categories/noDelete', [CategoriesCon-
//transaction
Route::get('/transaction',
[TransactionController::class, 'tampil']);
Route::get('/transaction/tambah', [TransactionCon-
Route::post('transaction/upload', [TransactionCon-
Route::get('transaction/edit/{id_transaction}', [Trans-
actionController::class, 'edit']);
Route::put('transaction/update/{id_transaction}',
[TransactionController::class, 'update']);
Route::get('transaction/hapus/{id_transaction}',
[TransactionController::class, 'hapus']);
Route::get('transaction/delete/{id_transaction}',
[TransactionController::class, 'delete']);
Route::get('transaction/noDelete', [TransactionCon-
6. transactionController.php
source code :
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Transaction;
class TransactionController extends Controller

{
public function tampil(){
$transaction = Transaction::all();
return view('transaction.transaction', com-
pact('transaction'));
}
public function tambah(){
return view('transaction.transaction-entry');
}
// function untuk insert data
public function upload(Request $request) {
24
'jenis' => 'required',
'tgl' => 'required'
]);
Transaction::create([
'nama' => $request->nama,
'jenis' => $request->jenis,
'harga' => $request->harga,
'tgl' => $request->tgl
]);
return redirect('/transaction')->with('suc-
cess', 'Data berhasil ditambahkan');
}
function edit($id_transaction) {
$transaction = Transaction::find($id_transac-
tion);
return view('transaction.transaction-edit',
compact('transaction'));
}
// update data ke database
function update($id_transaction, Request $request)
{
'jenis' => 'required',
'tgl' => 'required'
]);
tion);
$transaction->nama = $request->nama;
$transaction->jenis = $request->jenis;
$transaction->harga = $request->harga;
$transaction->tgl = $request->tgl;
$transaction->save();
return redirect('/transaction') -> with('suc-
cess', 'Data berhasil diubah');
}
function hapus($id_transaction) {
tion);
return view('transaction.transaction-hapus',
compact('transaction'));
}
function delete($id_transaction) {
// hapus file
tion);
// hapus data
$transaction->delete();
25
return redirect('/transaction');
}
function noDelete() {
return redirect('/transaction')->with('error',
'Data tidak dapat dihapus');
}
}
VIII.5 Kesimpulan
1. MVC membagi aplikasi ke dalam tiga bagian fungsional : Model,
View dan Controller.
2. Model : adalah kode-kode untuk model bisnis dan data. biasanya
berhubungan langsung dengan database untuk memanipulasi data (in-
sert, update, delete, search).
3. View : merupakan bagian yang menangani presentation logic. berisi
kode-kode untuk tampilan.
4. Controller : merupakan bagian yang mengatur hubungan antara bagian
model dan bagian view.
1
BAB IX
KESIMPULAN
Dengan adanya kegiatan praktikum Pemrograman Web. Penulis dapat
menyimpulkan sebagai berikut :
1. Hyper Text Markup Language adalah bahasa mark up untuk mendeskripsi
dokumen-dokumen web (halaman web).
2. Text Cascading Style Sheets berfungsi untuk mengontrol tampilan dari sebuah
halaman website.
3. Javascript dapat mengubah isi HTML, dapat mengubah atribut HTML, dapat
mengubah styles (CSS), dapat pula mengenali data input.
4. Keuntungan menggunakan Javascript External yaitu dapat membagi code an-
tara html dan javascript, dapat membuat code html dan javascript mudah
dibaca, dan dapat membuat file javascript diload lebih cepat.
5. PHP (Hypertext Preprocessor) merupakan salah satu bahasa webscripting
yang sangat powerful.
6. PHP session digunakan untuk menyimpan user information pada server untuk
digunakan kemudian (username, password, dll).
7. Database adalah sekelompok data yang ditaruh secara sistematis dalam
perangkat komputer. Database merupakan perkumpulan data yang disimpan
dalam komputer untuk dapat dengan mudah diakses, di update dan diorganisir
menggunakan Database Management System.
8. Create berfungsi untuk membuat record baru pada sistem basis data, sedan-
gkan update berfungsi untuk memodifikasi data atau record yang telah tersim-
pan di dalam database.
9. PDF (Portable Document Format) adalah sebuah format berkas yang dibuat
oleh adobe systems pada tahun 1993 untuk keperluan pertukaran dokumen
digital.
10. Dompdf merupakan sebuah package yang sering digunakan untuk membuat
laporan PDF pada bahasa pemograma PHP.
Nama Aslab : TTD :

Nofia Hidayati
Tanggal :
2
DAFTAR PUSTAKA
Gregorius, A. (2012). Buku Pintar HTML5 + CSS3 + DreamWeaver CS6.
Yogyakarta: Jubilee Enterprise.
Hartanti, D. (2010). Analisis Sistem Informasi Kepegawaian Pemerintah. Jakarta:
Informatika Bekasi.
Puspitosari, H. A. (2010). Pemrograman Web Database dengan PHP dan.
Malang: Skripta.
Raharjo, B. &. (2010). Modul Pemrograman Web (HTML, PHP, dan MySQL).
Saputra, A. (Februari 2012). Webtrik : PHP, HTML5, dan CSS3. Jakarta.
Setiawan, D. (2017). Buku Sakti Pemrograman Web: HTML, CSS, PHP, MySQL
& Javascript. Anak Hebat Indonesia.
Solichin, A. (2016). Pemrograman web dengan PHP dan MySQL. Budi Luhur.
LABORATORIUM PEMROGRAMAN KOMPUTER
INSTITUT TEKNOLOGI NASIONAL
Kampus II : Jl. Raya Karanglo Km. 2 Malang
LEMBAR ASISTENSI PRAKTIKUM PEMROGRAMAN WEB

Nama : Shohibul Maarif
NIM : 2018066
Kelompok : 16
Asistensi
No. Tanggal Paraf
Konsep Program Hasil Akhir
HTML
CSS
Instruktur
JAVASCRIPT
PHP DASAR
1
PHP LOGIN
PHP CRUD
FRAMEWORK
Dosen
Batas Akhir:

Laporan Web

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Laporan Web

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM

PROGRAM STUDI TEKNIK INFORMATIKA S-1

(Ahmad Faisol, ST, MT) (Hani Zulfia Zahro, S.Kom.M.Kom)

PROGRAM STUDI TEKNIK INFORMATIKA S-1

Malang, ... ……… 2022

I.1 Latar Belakang.............................................................................................I-1

I.2 Rumusan Masalah........................................................................................I-2

II.1 Landasan Teori..........................................................................................II-1

II.2 Langkah – Langkah Praktikum..................................................................II-2

II.3 Projek Praktikum : CatShop......................................................................II-2

II.4 Projek Rumah : Penyewaan Gitar..............................................................II-5

BAB III CSS.......................................................................................................III-1

III.1 Landasan Teori........................................................................................III-1

III.2 Langkah – Langkah Praktikum...............................................................III-9

III.3 Projek Praktikum : CatShop....................................................................III-9

III.4 Projek Rumah : Penyewaan Gitar.........................................................III-24

IV.1 Landasan Teori.......................................................................................IV-1

IV.2 Langkah – Langkah Praktikum...............................................................IV-5

IV.3 Projek Praktikum : CatShop...................................................................IV-6

IV.4 Projek Rumah : Program Web Kalkulator..............................................IV-7

IV.5 Projek Rumah : Penyewaan Gitar.........................................................IV-10

BAB V PHP DASAR DAN DATABASE..........................................................V-1

V.1 Landasan Teori..........................................................................................V-1

V.2 Langkah – Langkah Praktikum.................................................................V-2

V.3 Projek Praktikum : CatShop......................................................................V-2

V.4 Projek Rumah : Penyewaan Gitar...........................................................V-10

BAB VI PHP LOGIN DAN CRUD I.................................................................VI-1

VI.1 Landasan Teori.......................................................................................VI-1

VI.2 Langkah – Langkah Praktikum...............................................................VI-2

VI.3 Projek Praktikum : CatShop...................................................................VI-2

VI.4 Projek Rumah : Penyewaan Gitar.........................................................VI-12

BAB VII CRUD II DAN REPORT..................................................................VII-1

VII.1 Landasan Teori.....................................................................................VII-1

VII.2 Langkah – Langkah Praktikum............................................................VII-2

VII.3 Projek Praktikum : CatShop.................................................................VII-2

VII.4 Projek Rumah : Penyewaan Gitar......................................................VII-10

BAB VIII FRAMEWORK..............................................................................VIII-1

VIII.1 Landasan Teori..................................................................................VIII-1

VIII.2 Langkah – Langkah Praktikum.........................................................VIII-6

VIII.3 Projek Praktikum : CatShop..............................................................VIII-6

VIII.4 Projek Rumah : CatShop.................................................................VIII-16

Gambar 2.2 Tampilan Web Browser login.html..................................................II-4

Gambar 2.3 Tampilan Web Browser index.html..................................................II-6

Gambar 2.4 Tampilan Web Browser login.html..................................................II-7

Gambar 3.1 Hasil Css Valid Color Name...........................................................III-4

Gambar 3.2 Hasil Css RGB................................................................................III-4

Gambar 3.3 Hasil Css Hexadecimal...................................................................III-5

Gambar 3.4 Hasil Css Border.............................................................................III-6

Gambar 3.5 Tampilan Web Browser CSS Catshop..........................................III-12

Gambar 3.6 Tampilan Login Web Browser CSS Catshop................................III-13

Gambar 3.7 Tampilan Admin Web Browser CSS Catshop...............................III-17

Gambar 3.8 Tampilan Categories Web Browser Catshop................................III-18

Gambar 3.9 Tampilan Categories-Entry Web Browser Catshop.....................III-20

Gambar 3.10 Tampilan Transaction Web Browser Catshop............................III-22

Gambar 3.11 Tampilan Transaction Web Browser Catshop............................III-24

Gambar 3.12 Tampilan Home Web Browser CSS............................................III-28

Gambar 3.13 Tampilan login Web Browser.....................................................III-29

Gambar 3.14 Tampilan Admin Web Browser...................................................III-30

Gambar 3.15 Tampilan Categoies Web Browser.............................................III-31

Gambar 3.16 Tampilan Categoies-entry Web Browser....................................III-33

Gambar 4.1 Tampilan admin.html......................................................................IV-6

Gambar 4.2 Tampilan Web Kalkulator...............................................................IV-9

Gambar 4.3 Tampilan admin.html....................................................................IV-11