Web 2018

PANDUAN PRATIKUM
PEMROGRAMAN WEB
2018
Lab. Pemrograman dan Rekayasa Perangkat Lunak
Lab. Rpl Informatika ITN Malang 2018

Bab I – HTML
Pratikan akan mempelajari tentang dasar – dasar HTML. Kemudian dilanjutkan dengan
membuat halaman awal Web menggunakan HTML.
Tujuan setelah mempelajari Bab I ini adalah :
1. Mampu memahami struktur dasar HTML.
2. Mampu memahami tag – tag dasar HTML.
3. Mampu membuat halaman web menggunakan HTML.
A. Pengertian HTML
HTML (Hyper Text Markup Language) adalah bahasa markup untuk 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 pendeskripsikan
konten dokumen yang berbeda. Penulisan ekstensi html adalah .htm atau yang sering
dipakai pada umumnya .html. Tidak ada perbedaan, itu sepenuhnya sesuai keinginan kita.
Kemudian untuk membaca dokumen HTML dan menampilkannya sebagai halaman web kita
menggunakan web browser (Mozilla, Chrome, dll). Browser tidak menampilkan tag HTML,
tetapi menggunakan tag untuk menafsirkan isi dari halaman tersebut.
B. Struktur Dasar HTML

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
HELLO RPL !!!
</body>
</html>

Hasil :
C. Tag – Tag Dasar HTML

1. HTML Heading
HTML Heading adalah tag dasar html yang berfungsi untuk membuat heading pada
tampilan web. Berguna untuk membedakan antara isi halaman web dan header dari
halaman itu sendiri.
<body>
<h1>JUDUL 1</h1>
<h2>JUDUL 2</h2>
<h3>JUDUL 3</h3>
<h4>JUDUL 4</h4>
<h5>JUDUL 5</h5>
<h6>JUDUL 6</h6>
</body>
Hasil :

2. HTML Praragraf
HTML Paragraf membuat isi pada halama web.
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
Hasil :
3. HTML Break
HTML Break digunakan untuk membuat baris baru.
<body>
<p>Ini Baris Pertama <br> Ini Baris Kedua </p>
</body>
Hasil :
4. HTML Font
HTML Font digunakan untuk mengatur warna, ukuran dan bentuk tulisan pada halaman
HTML.
<body>
<font color="blue">Warna Biru</font>
<font size="30">Ukuran 30</font>
<font face="Courier New">Bentuk Tulisan</font>
</body>

Hasil :
5. HTML Formatting
HTML Formatting digunakan untuk membuat teks tebal, italic, dll.
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>Lab. <mark>Rpl</mark> Informatika</p>
<p>Lab. <u>Rpl</u> Informatika</p>
<p>HTML <small>Small</small> Formatting</p>
<p>My favorite color is <del>red</del> blue.</p>
</body>
Hasil :
6. HTML Image
HTML Image digunakan untuk memasukkan gambar pada halaman web. Dengan
memanggil nama gambar yang tersimpan.
<body>
<img src="rpl.PNG">
<img src="rpl.PNG" width="200px" height="200px">
</body>

Hasil :
7. HTML Link
HTML Link digunakan untuk menghubungkan antara halaman web satu dengan halaman
web lainnya.
<a href="rpl.php">Halaman Rpl</a>
Hasil :
8. HTML List
HTML List berguna untuk membuat Numbering List maupun Bullet List pada element
HTML. Terdiri Atas 2 Yaitu Unordered List untuk Bullet dan Ordered List untuk
Numbering.
<body>
<h3>LIST BULLET</h3>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<br>
<h3>LIST NUMBERING</h3>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>

Hasil :
9. HTML Tabel
HTML Tabel digunakan untuk membuat sebuah atau lebih tabel pada halaman web.
Seperti Header tabel <th>, baris tabel <tr>, data tabel <td>.
<body>
<table>
<tr>
<th>NO</th>
<th>NAMA</th>
<th>UMUR</th>
</tr>
<tr>
<td>1</td>
<td>Miko</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Rendy</td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td>Komang</td>
<td>30</td>
</tr>
</table>
</body>

Hasil :
a. Coll Span
Untuk menggabungkan beberapa kolom menjadi 1.
<table border="1">
<tr>
<th colspan="2">NAMA</th>
<th>UMUR</th>
</tr>
<tr>
<td>1</td>
<td>Miko</td>
<td>20</td>
</tr>
<tr>
<td>2</td>
<td>Rendy</td>
<td>21</td>
</tr>
<tr>
<td>3</td>
<td>Komang</td>
<td>30</td>
</tr>
</table>
Hasil :

b. Row Span
Untuk menggabungkan beberapa baris menjadi 1.
<table border="1">
<tr>
<th>NO</th>
<th>NAMA</th>
<th>UMUR</th>
</tr>
<tr>
<td>1</td>
<td>Miko</td>
<td rowspan="2">20</td>
</tr>
<tr>
<td>2</td>
<td>Rendy</td>
</tr>
<tr>
<td>3</td>
<td>Komang</td>
<td>30</td>
</tr>
</table>
Hasil :
10. HTML Form

Tag HTML Form berguna untuk mengambil data yang diinputkan oleh user.
<form>
.
.form elements
.
</form>

Adapun tipe input (elements) :
a. Text Input
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Hasil :
b. Checkbox
<form>
<input type="checkbox" name="a" value="Pilihan1">Pilihan 1
<br>
<input type="checkbox" name="b" value="Pilihan2">Pilihan 2
</form>
Hasil :
c. Radio Button
<form>
<input type="radio" name="gender" value="male" checked> Male
<br>
<input type="radio" name="gender" value="female"> Female
<br>
<input type="radio" name="gender" value="other"> Other
</form>

Hasil :
d. Combobox
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Hasil :
e. Textarea
<form>
<textarea name="contoh" rows="10" cols="30">Ini adalah contoh dari
text area.</textarea>
<br>
</form>

Hasil :
f. Button
<button type="button" onclick="alert('Hello RPL!')">Click
Me!</button>
Hasil :
g. Submit Button
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Tele"><br>
Last name:<br>
<input type="text" name="lastname" value="Tubis"><br><br>
<input type="submit" value="Submit">
</form>

Hasil :
h. Password
<form>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="pswd">
</form>
Hasil :
11. HTML Comment

HTML Comment digunakan untuk melakukan komentar pada html.


D. Latihan
1. Membuat halaman index.html
Source code :
<!DOCTYPE html>
<html>
<head>
<title>Pratikum Web 2018</title>
</head>
<body>
<h2>PERPUSTAKAAN MALANG JAWA TIMUR</h2>
<h3>" Lab. Rekayasa Perangkat Lunak "</h3>
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00), Jum'at - Sabtu

(08.00 - 13.00)</p>
<a href="index.html"> >> HOME</a>

<a href="#"> >> ABOUT</a>
<a href="#"> >> CONTACT</a>
<a href="#"> >> LOGIN</a>
<p>Selamat Datang di Perpustakaan Kami.</p>

<p>Buku adalah jembatan ilmu bagi siapapun yang ingin menjadi
menambah ilmu ataupun yang ingin mempunyai ilmu.</p>
<h4>CopyRight © Lab. Rpl ITN Malang 2018</h4>

</body>
</html>
Sehingga tampilan halaman index sebagai berikut :

2. Membuat halaman about.html
Source code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>

(08.00 - 13.00)</p>

<a href="about.html"> >> ABOUT</a>
<p>Perpustakaan ini terletak di kawasan Malang</p>

<p>Berbagai macam buku terdapat disini mulai buku tentang judul
skripsi, jurnal, makalah dan lain sebagainya.</p>
<p>Perpustakaan ini didirakan pada tahun 1995, yang bertujuan
untuk membuat orang - orang yang tidak memiliki biaya dapat membaca
buku yang mereka inginkan tanpa harus membeli dengan kata lain dapat
membaca buku secara gratis tanpa dipungut biaya.</p>

</body>
</html>
Sehingga tampilan halaman about sebagai berikut :

3. Membuat halaman contact.html
Source code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>

(08.00 - 13.00)</p>

<a href="contact.html"> >> CONTACT</a>

<p>Jika ada saran atau pun kritik tentang pelayanan kami, bisa
hubungi di nomor :</p>
<p>081XXXXXXXXX</p>
<p>082XXXXXXXXX</p>
<p>INGAT !!! PERPUSTAKAAN INI GRATIS TANPA DIPUNGUT BIAYA
APAPUN.</p>

</body>
</html>
Sehingga tampilan halaman contact sebagai berikut :

4. Membuat halaman login.html
Source code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>

(08.00 - 13.00)</p>

<a href="login.html"> >> LOGIN</a>
<table>
<tr>
<td></td><td></td>
<td>
<label>SILAHKAN LOGIN ADMIN !!!</label>
</td>
</tr>
<tr>
<td>
<label>USERNAME</label>
</td>
<td> : </td>
<td>
<input type="text" name="Username">
</td>
</tr>
<tr>
<td>
<label>PASSWORD</label>
</td>
<td> : </td>
<td>
<input type="password" name="Password">
</td>
</tr>
<tr>
<td></td><td></td>
<td>
<input type="submit" name="Login"
value="LOGIN">
</td>
</tr>
</table>

</body>

</html>
Sehingga tampilan halaman login sebagai berikut :
5. Membuat halaman admin.html

Source code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>

(08.00 - 13.00)</p>
<a href="register_member.html">REGISTER MEMBER</a>

<a href="peminjaman_buku.html">PEMINJAMAN BUKU</a>
<a href="pengembalian_buku.html">PENGEMBALIAN BUKU</a>
<a href="logout.php">LOGOUT</a>
<h2>Selamat Datang Admin !!</h2>

<p>Tunjukan Kinerja yang baik ya Admin.</p>

</body>
</html>

Sehingga tampilan halaman admin sebagai berikut :
6. Membuat halaman register_member.html

Source code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>

(08.00 - 13.00)</p>
<a href="admin.html"> >> ADMIN</a>
<h3>REGISTER MEMBER !!!</h3>

<table>
<tr>
<td>
<label>ID MEMBER</label>
</td>
<td> : </td>
<td>
<input type="text" name="Id">
</td>
</tr>
<tr>
<td>
</td>

<td> : </td>
<td>
</td>
</tr>
<tr>
<td>
<label>EMAIL</label>
</td>
<td> : </td>
<td>
<input type="text" name="Email">
</td>
</tr>
<tr>
<td></td><td></td>
<td>
<input type="submit" name="Daftar_member"
value="DAFTAR">
</td>
</tr>
</table>

</body>
</html>
Sehingga tampilan halaman register member sebagai berikut :

7. Membuat halaman peminjaman_buku.html
Source code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>

(08.00 - 13.00)</p>

<a href="#"> >> TRANSAKSI PINJAM</a>
<h3>PEMINJAMAN BUKU !!!</h3>

<table>
<tr>
<td> ID MEMBER</td>
<td> : </td>
<td>
</td>
</tr>
<tr>
<td>
<label>JUDUL BUKU</label>
</td>
<td> : </td>
<td>
<input type="text" name="Judul">
</td>
</tr>
<tr>
<td>
<label>NAMA PEMINJAM</label>
</td>
<td> : </td>
<td>
<input type="text" name="Peminjam">
</td>
</tr>
<tr>
<td>
<label>TANGGAL PINJAM</label>
</td>
<td> : </td>
<td>
<input type="text" name="Tanggal_pinjam">
</td>
</tr>
<tr>
<td>

<label>TANGGAL KEMBALI</label>
</td>
<td> : </td>
<td>
<input type="text"
name="Tanggal_kembali">
</td>
</tr>
<tr>
<td>
<label>KETERANGAN</label>
</td>
<td> : </td>
<td>
<input type="text" name="Keterangan">
</td>
</tr>
<tr>
<td></td><td></td>
<td>
<input type="submit" name="Tr_peminjaman"
value="SIMPAN">
</td>
</tr>
</table>

</body>
</html>
Sehingga tampilan halaman peminjaman buku sebagai berikut :

8. Membuat halaman pengembalian_buku.html
Source code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>

(08.00 - 13.00)</p>

<a href="transaksi_pengembalian.php"> >> TRANSAKSI KEMBALI</a>
<h3>PENGEMBALIAN BUKU !!!</h3>

<table>
<tr>
<td> ID MEMBER</td>
<td> : </td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Peminjam">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Tanggal_pinjam">
</td>
</tr>
<tr>
<td>

</td>
<td> : </td>
<td>
<input type="text"
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Keterangan">
</td>
</tr>
<tr>
<td>
<label>KEMBALI</label>
</td>
<td> : </td>
<td>
<input type="checkbox" name="Kembali"
value="VALID"> VALID
</td>
</tr>
<tr>
<td></td><td></td>
<td>
<input type="submit"
name="Tr_pengembalian" value="SIMPAN">
</td>
</tr>
</table>

</body>
</html>

Sehingga tampilan halaman pengembalian buku sebagian berikut :

BAB II – CSS
Pratikan akan mempelajari tentang dasar – dasar CSS. Kemudian dilanjutkan dengan
membuat halaman awal web menggunakan CSS.
Tujuan setelah mempelajari bab 2 ini adalah :
1. Mampu memahami dasar – dasar CSS.

2. Dapat menggunakan penggabungan antara HTML dan CSS.
A. Pengertian CSS
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 Dasar CSS
1. Syntax CSS
Sintak dari CSS berbeda dengan HTML. Apabila HTML menggunakan tag dan
attribute, maka CSS menggunakan selector, dimana selector memiliki declarations.
Declarations memiliki properties value. Sintak-sintak CSS ini ada yang diselipkan di dalam
dokumen HTML ada juga yang berupa file tersendiri yang dapat diakses oleh HTML. Secara
garis besar anatomi dari aturan CSS adalah sebagai berikut:

2. Selectors
CSS Selector digunakan untuk menemukan atau memilih nama element, id, class,
attribute dan lainnya di dalam halaman HTML.
a. Element / Tag
Memilih element atau tag sesuai dengan nama tag yang ada pada halaman
HTML.
p {
color: blue;
text-align: center;
}
b. ID
Menggunkan atribut id pada tag HTML untuk pemanggilannya. Biasanya
digunakan untuk tag / element yang memiliki style sendiri. Untuk
penulisannya menggunakan tanda pagar (#) kemudian nama idnya.
Penerapannya pada HTML tag / element menggunakan attribut
id=”nama_selector_id”.
#coba1 {
text-align: center;
color: blue;
}
c. Class
Memilih element dengan atribut class yang spesifik. Untuk memilih element
atau tag yang spesifik, dengan menulis nama element kemudian diikuti
dengan tanda titik(.) dan dilanjutkan dengan nama class yang dideklarasikan.
Bentuk Class Umum :
.kelas {
text-align: center;
color: blue;
}

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

3. Comment
Comment digunakan untuk mendeskripsikan syntax yang ada pada css, dan akan
diabaikan oleb browser. Penerapannya menggunakan /*.....*/, ini berlaku untuk satu baris
maupun lebih.
p {
color: blue;
/* This is a single-line comment */
text-align: center;
}
C. Penempatan CSS
1. External Style Sheet
Penempatan css pada satu file css, file css tersebut dibuat dengan ekstensi .css yang
kemudian dipanggil menggunakan element link pada HTML.
<head>
<link rel="stylesheet" type="text/css" href="cobastyle.css">
</head>
2. Internal Style Sheet

Penempatan css berada didalam file HTML. Untuk mendeklarasikan css ini kita
menggunakan tag <style>. Biasanya digunakan jika file HTML itu memiliki style
tersendiri dan berbeda dengan style css halaman HTML yang lain.
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
3. Inline Style
Penempatan style sheet langsung pada tag – tag HTML. Untuk mendeklarasikan css ini
kita menggunakan atribut style pada tag HTML. Biasanya digunakan jika kita ingin
membuat style sendiri untuk satu tag di dalam HTML.
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

D. Properties CSS
1. COLOR
Terdapat 3 cara untuk pewarnaan style dalam CSS, yaitu Valid Color Name, RGB dan
Hexadecimal Value.
Contoh Valid Color Name :
<!DOCTYPE html>
<html>
<body>
<p style="background-color:blue;"> warna biru</p>
<p style="background-color:green;"> warna hijau</p>
<p style="background-color:yellow;"> warna kuning</p>
</body>
</html>
Hasil :
Contoh RGB :
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99,
71)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255,
99, 71, 0.5)</h1>
</body>
</html>
Hasil :

Contoh Hexadecimal :
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
</body>
</html>
Hasil :
2. BACKGROUND
Digunakan untuk mengatur style background suatu tag / element.
Terdiri dari beberapa properties diantaranya :
a. backgroud-color
b. backgroud-image
c. backgroud-repeat
d. backgroud-attachment
e. backgroud-position
Syntax CSS Background :
body {
background-color: lightblue;
background-image: url("paper.png");
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
background:#ffffff url("img_tree.png") no-repeat right top;
/*Shorthand*/
}

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;}
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>
<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 :
4. MARGIN
Margin digunakan untuk mengatur jarak antara element pada HTML. Untuk valuenya
dapat menggunakan auto, px, % dan lainnya.
- Auto digunakan untuk mengatur secara otomatis.
- Px untuk mengatur ukuran sesuai dengan kemauan sendiri.
- % mengatur jarak menggunakan persern misal 30 %.
Contoh margin :
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
/*shorthand*/
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.
- Auto digunakan untuk mengatur secara otomatis.
- Px untuk mengatur ukuran sesuai dengan kemauan sendiri.
- % mengatur jarak menggunakan persern misal 30 %.
Contoh Padding :
p {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
/*shorthand*/
padding: 50px 30px 50px 80px;
}
6. HEIGT / WITDH
Height untuk mengatur tingi suatu style, sedangkan Witdh digunakan untuk mengatur
lebar suatu style, biasa digunakan pada tag layout <div> untuk mengatur ukuran.
Contoh Height / Witdh :
div {
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}
7. TEXT
Pada CSS Text kita dapat mengatur style mulai dari warna text, aligment, case text,
indent text, jarak kata, arah text, jarak antar line, jarak antar huruf dan underline.
Contoh CSS Text :

p {
color: green;
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-indent: 50px;

word-spacing: -5px;
direction: rtl;
line-height: 1.8;
letter-spacing: 3px;
text-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;
}
E. Latihan
1. Buat satu file CSS dengan nama style.css kemudian gunakan source code berikut :
Source code :
body {
margin-left: 8%;
margin-top: 20px;
background-color: lightgrey;
margin-right: 8%;
}
body, .header, .nav, .samping, .footer{
border: 1px solid white;
}
.header{
width: 100%;
padding: 2px 0px 2px 0px;
background-color: black;
text-align: center;
color: white;

}
.header h3{
font-style: italic;
}
.nav{
width: 100%;
text-align: center;
color: black;
height: 50px;
}
.samping {
float: left;
height: 350px;
width: 19%;
}
.samping a{
color: black;
text-decoration: none;
}
.isi{
float: left;
height: 350px;
border: 1px solid black;
color: black;
background-color: white;
padding-left: 7px;
width: 80%;
}
.footer{
background-color: black;
color: white;
text-align: center;
width: 100%;
clear: both;
}
2. Edit (rubah) source code halaman yang sudah dibuat dan Implementasikan ke halaman
masing masing.
a. Halaman index.html :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
</div>
<div class="nav">
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00), Jum'at -

Sabtu (08.00 - 13.00)</p>
</div>
<div class="samping">
<ul>
<br><br><br>
<br><br>
<a href="#"> >> ABOUT</a>
<br><br>
<br><br>
</ul>
</div>
<div class="isi">
<p style="text-align: center;">Selamat Datang di
Perpustakaan Kami.</p>
<p>Buku adalah jembatan ilmu bagi siapapun yang ingin
menjadi menambah ilmu ataupun yang ingin mempunyai ilmu.</p>
</div>
<div class="footer">
</div>
</body>
</html>
Sehingga tampilan halaman index.html sebagai berikut :

b. Halaman about.html :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</div>
<div class="nav">
<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00),
Jum'at - Sabtu (08.00 - 13.00)</p>
</div>
<ul>
<br><br><br>
<br><br>
<br><br>
<br><br>
</ul>
</div>
<div class="isi">
<p style="text-align: center;">Perpustakaan ini
terletak di kawasan Malang</p>
<p>Berbagai macam buku terdapat disini mulai buku
tentang judul skripsi, jurnal, makalah dan lain sebagainya.</p>
<p>Perpustakaan ini didirakan pada tahun 1995, yang
bertujuan untuk membuat orang - orang yang tidak memiliki biaya
dapat membaca buku yang mereka inginkan tanpa harus membeli
dengan kata lain dapat membaca buku secara gratis tanpa dipungut
biaya.</p>
</div>
</div>
</body>
</html>

Sehingga tampilan halaman about.html sebagai berikut :
c. Halaman contact.html :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.isi {
text-align: center;
}
</style>
</head>
<body>
</div>
<div class="nav">
Jum'at - Sabtu (08.00 - 13.00)</p>
</div>
<ul>
<br><br><br>
<br><br>
<br><br>

<br><br>
</ul>
</div>
<div class="isi">
<p>Jika ada saran atau pun kritik tentang pelayanan
kami, bisa hubungi di nomor :</p>
<p>081XXXXXXXXX</p>
<p>082XXXXXXXXX</p>
<p>INGAT !!! PERPUSTAKAAN INI GRATIS TANPA DIPUNGUT
BIAYA APAPUN.</p>
</div>
</div>
</body>
</html>
Sehingga tampilan halaman contact.html sebagai berikut :

d. Halaman login.html :
<!DOCTYPE html>
<html>
<head>
table {
padding-left: 30%;
padding-top: 10%;
}
input
{
width: 100%;
}
</style>
</head>
<body>
<form action="#" method="#">
</div>
<div class="nav">
Jum'at - Sabtu (08.00 - 13.00)</p>
</div>
<ul>
<br><br><br>
<br><br>
<br><br>
<br><br>
<a href="login.html"> >> LOGIN</a>
</ul>
</div>
<div class="isi">
<table>
<tr>
<td></td><td></td>
<td>
<label>SILAHKAN LOGIN ADMIN
!!!</label>
</td>
</tr>
<tr>
<td>
</td>

<td> : </td>
<td>
</td>
</tr>
<tr>
<td>
<label>PASSWORD</label>
</td>
<td> : </td>
<td>
<input type="password"
name="Password">
</td>
</tr>
<tr>
<td></td><td></td>
<td>
<input type="submit" name="Login"
value="LOGIN">
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Sehingga tampilan halaman login.html sebagai berikut :

e. Halaman admin.html :
<!DOCTYPE html>
<html>
<head>
.isi{
text-align: center;
}
</style>
</head>
<body>
</div>
<div class="nav">
Jum'at - Sabtu (08.00 - 13.00)</p>
</div>
<ul>
<br>
<a href="register_member.html">REGISTER
MEMBER</a>
<br><br><br>
<a href="peminjaman_buku.html">PEMINJAMAN
BUKU</a>
<br><br><br>
<a
href="pengembalian_buku.html">PENGEMBALIAN BUKU</a>
<br><br><br>
<a href="logout.php">LOGOUT</a>
</ul>
</div>
<div class="isi">
<h2>Selamat Datang Admin !!</h2>
<p>Tunjukan Kinerja yang baik ya Admin.</p>
</div>
</div>
</body>
</html>

Sehingga tampilan halaman admin.html sebagai berikut :
f. Halaman register_member.html :
<!DOCTYPE html>
<html>
<head>
table {
padding-left: 30%;
}
input
{
width: 100%;
}
h3{
text-align: center;
}
</style>
</head>
<body>
</div>
<div class="nav">
Jum'at - Sabtu (08.00 - 13.00)</p>
</div>

<ul>
<br><br>
</ul>
</div>
<div class="isi">
<h3>REGISTER MEMBER !!!</h3>
<table>
<tr>
<td>
<label>ID MEMBER</label>
</td>
<td> : </td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text"
name="Username">
</td>
</tr>
<tr>
<td>
<label>EMAIL</label>
</td>
<td> : </td>
<td>
<input type="text" name="Email">
</td>
</tr>
<tr>
<td></td><td></td>
<td>
name="Daftar_member" value="DAFTAR">
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>

Sehingga tampilan halaman register_member.html sebagai berikut :
g. Halaman peminjaman_buku.html :
<!DOCTYPE html>
<html>
<head>
table {
padding-left: 30%;
}
input
{
width: 100%;
}
h3{
text-align: center;
}
</style>
</head>
<body>
</div>
<div class="nav">
Jum'at - Sabtu (08.00 - 13.00)</p>
</div>

<ul>
<br><br>
<br><br><br>
<a href="#"> >> TRANSAKSI PINJAM</a>
</ul>
</div>
<div class="isi">
<table>
<tr>
<td> ID MEMBER</td>
<td> : </td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text"
name="Peminjam">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text"
name="Tanggal_pinjam">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text"

</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text"
name="Keterangan">
</td>
</tr>
<tr>
<td></td><td></td>
<td>
name="Tr_peminjaman" value="SIMPAN">
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Sehingga tampilan halaman peminjaman_buku.html sebagai berikut :

h. Halaman pengembalian_buku.html :
<!DOCTYPE html>
<html>
<head>
table {
padding-left: 30%;
}
h3{
text-align: center;
}
</style>
</head>
<body>
</div>
<div class="nav">
Jum'at - Sabtu (08.00 - 13.00)</p>
</div>
<ul>
<br><br>
<br><br><br>
<a href="#"> >> TRANSAKSI KEMBALI</a>
</ul>
</div>
<div class="isi">
<h3>PENGEMBALIAN BUKU !!!</h3>
<table>
<tr>
<td> ID MEMBER</td>
<td> : </td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
</td>
</tr>

<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text"
name="Peminjam">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text"
name="Tanggal_pinjam">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text"
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text"
name="Keterangan">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="checkbox"
name="Kembali" value="VALID"> VALID
</td>
</tr>
<tr>
<td></td><td></td>
<td>
<input style="width: 100%;"
type="submit" name="Tr_pengembalian" value="SIMPAN">
</td>
</tr>

</table>
</div>
</div>
</form>
</body>
</html>
Sehingga tampilan halaman pengembalian_buku.html sebagai berikut :

BAB III : DASAR – DASAR JAVA SCRIPT
Pratikan akan mempelajari tentang dasar – dasar Javascript.
1. Mampu memahami dasar – dasar Javascript.

2. Mampu memahami penggunaan Javascript.
A. Pengertian JavaScript
Javascript adalah bahasa pemrograman yang paling populer didunia. Javascript dapat
mengubah isi dari HTML, dapat mengubah atribut HTML, dapat mengubah styles (CSS),
dapat pula mengenali data input. Javascript juga berguna untuk desaign antar muka web yang
responsif.
B. Struktur Dasar Javascript

Syntax penulisan Javascript memerluka tag <script.
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
C. Penempatan JavaScript
1. Section Head
Javascript dapat ditempatkan didalam head. Jika telah menempatkan di head disarankan
agar tetap melanjutkan di head dan tidak membuat javascript di body lagi.
<!DOCTYPE html>
<html>
<head>
<script>
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 perbedaan 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>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
3. External Javascript
Javascript juga dapat dibuat dalam file tersendiri, bedanya hanya pada proses
pemanggilan. File javascript menggunakan ekstensi .js. Untuk menggunakan Javascript
external, tidak perlu menulis tag <script> didalam file javascript, langsung saja ke fungsi
yang akan diimplementasikan ke dalam halaman web.
Keuntungan menggunakan Javascript External
1. Dapat membagi code antara html dan javascript

2. Dapat membuat code html dan javascript mudah dibaca
3. Dapat membuat file javascript diload lebih cepat.
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

D. Dasar – Dasar JavaScript
a. JavaScript 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").innerHTML = 5 + 6;
</script>
</body>
</html>
b. Javascript Comment
Digunakan untuk menjelakan sourcode javascript atau memberi catatan pada sourcecode
Contoh single comment :
<script>
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
</script>
Contoh multi comment :
<script>
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myp"
in my web page:
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>

c. Javascript Variabel
Penulisan variabel menggunakan keyword var kemudian diikuti nama variabel/identifier.
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
d. Javascript 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
e. Javascript Operator
Operator Aritmatika Javascript.
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement
Operator Asigment / penugasan
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

Opertaor Hubungan
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
f. Javascript 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
}
g. Javascript Condition / kondisi

Javascript kondisi digunakan jika membutuhkan kondisi dalam suatu program.
1. IF
if (condition) {
block of code to be executed if the condition is true
}
2. IF ELSE
if (condition) {
block of code to be executed if the condition is true
} else {
block of code to be executed if the condition is false
}
3. IF ELSE IF ELSE
if (condition1) {
block of code to be executed if condition1 is true
} else if (condition2) {
block of code to be executed if the condition1 is false and
condition2 is true
} else {
block of code to be executed if the condition1 is false and
condition2 is false
}

4. SWITCH
switch(expression) {
case n:
code block
break;
case n:
code block
break;
default:
default code block
}
h. Javascript Loop
1. FOR LOOP
for (i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
2. WHILE
while (i < 10) {
text += "The number is " + i;
i++;
}
3. DO / WHILE
do {
text += "The number is " + i;
i++;
}
while (i < 10);
i. Javascript PopUp Boxes

1. ALERT BOX
Alert Box sering digunakan untuk memberikan informasi kepada pengguna. Bentuk
umum dari alert box adalah sebagai berikut :
alert("I am an alert box!");
2. CONFIRM BOX
Confirm box biasa digunakan jika program membutuhkan konfirmasi/verifikasi dari
pengguna saat confirm box muncul, pengguna diharuskan untuk meng-klik “OK” atau
“cancel” untuk melanjutkan proses, jika pengguna menekan button “OK” maka
confirm box akan mengembalikan nilai true, dan akan mengembalikan nilai false jika
button cancel yang di-klik.
var r = confirm("Press a button");
if (r == true) {
x = "You pressed OK!";
} else {
x = "You pressed Cancel!";

}
3. PROMPT BOX
Prompt box sering digunakan jika kita menginkan suatu nilai inputan dari pengguna.
Bentuk umum: prompt("sesuatu","nilaidefault");
var person = prompt("Please enter your name", "Harry Potter");
if (person == null || person == "") {

txt = "User cancelled the prompt.";
} else {
txt = "Hello " + person + "! How are you today?";
}
E. Latihan
1. Menambahkan Alert Box pada halaman peminjaman_buku.html dan
pengembalian_buku.html.
Pada saat klik halaman peminjaman_buku.html dan pengembalian_buku.html maka
otomatis akan muncul alert hari dan tanggal di hari ini juga.
Source code :

Hasil tampilan menggunakan Alert Box.
Halaman peminjaman_buku.html :
Halaman pengembalian_buku.html :

BAB IV : DASAR – DASAR PHP DAN DATABASE
Pratikan akan mempelajari tentang dasar – dasar Php dan Database.
1. Mampu memahami dasar – dasar Php.

2. Mampu membuat web Php.
3. Mampu mengimplementasikan Php.
4. Mampu membuat Database
A. Dasar – Dasar PHP

1. 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.
2. Syntax 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.
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
// This is a single-line comment
# This is also a single-line comment
/*
This is a multiple-lines comment block
that spans over multiple
lines
*/
?>

</body>
</html>
3. PHP Variabel
Dengan variabel, dapat menyimpan nlai atau informasi kedalam memori. Variabel
dapat kita gunakan berkali-kali sesuai kebutuhan. Nama variable diawali tanda $. Misal
$nama, $alamat. Nama variabel case sensitif, $A tidak sama dengan $a. jenis variabel
bisa berupa boolean, string, integer, float, double, dll. Variabel string bisa diapit tanda
petik dua, atau petik satu.
<?php
$txt="Helloworld!";
$x=5;
$y=10.5;
?>
4. PHP Echo / Print

Echo digunakan untuk mencetak output pada php.
<?php
echo"<h2>PHPisFun!</h2>";
echo"Helloworld!<br>";
echo"I'm_about_to_learn_PHP!<br>";
echo"This", "string ", "was ", "made ", "with multiple
parameters.";
?>
5. PHP Operator
Terdapat beberapa operator diantaranya :
a. Operator Aritmatika
Operator Name Example Result
+ Addition $x + $y Sum of $x and $y
- Subtraction $x - $y Difference of $x and $y
* Multiplication $x * $y Product of $x and $y
/ Division $x / $y Quotient of $x and $y
% Modulus $x % $y Remainder of $x divided by $y

b. Operator Asigment
Assignment Same as... Description
x=y x=y The left operand gets set to the value of the
expression on the right
x += y x=x+y Addition
x -= y x=x-y Subtraction
x *= y x=x*y Multiplication
x /= y x=x/y Division
x %= y x=x%y Modulus
c. Operator Hubungan
== Equal $x == $y Returns true if $x is equal to $y
=== Identical $x === Returns true if $x is equal to $y, and

$y they are of the same type
!= Not equal $x != $y Returns true if $x is not equal to $y
<> Not equal $x <> $y Returns true if $x is not equal to $y
!== Not identical $x !== Returns true if $x is not equal to $y,

$y or they are not of the same type
> Greater than $x > $y Returns true if $x is greater than $y
< Less than $x < $y Returns true if $x is less than $y

>= Greater than or $x >= $y Returns true if $x is greater than or
equal to equal to $y
<= Less than or $x <= $y Returns true if $x is less than or

equal to equal to $y
d. Operator Increment / Decrement
Operator Name Description
++$x Pre-increment Increments $x by one, then returns $x
$x++ Post-increment Returns $x, then increments $x by one
--$x Pre-decrement Decrements $x by one, then returns $x
$x-- Post-decrement Returns $x, then decrements $x by one
e. Operator Logical
and And $x and $y True if both $x and $y are true
or Or $x or $y True if either $x or $y is true
xor Xor $x xor $y True if either $x or $y is true, but not

both
&& And $x && $y True if both $x and $y are true
|| Or $x || $y True if either $x or $y is true
! Not !$x True if $x is not true

6. PHP If Else If
Dengan If Else If kita dapat menjalankan kondisi sesuai dengan yang kita harapkan.
<?php
$t = date("H");
if ($t < "10") {

echo "Have a good morning!";
} elseif ($t < "20") {
echo "Have a good day!";
} else {
echo "Have a good night!";
}
?>
7. PHP Switch
Fungsinya tentu sama saja dengan if…Else statement, hanya saja syntaxnya yang
berbeda.
<?php
$favcolor = "red";
switch ($favcolor) {
case "red":
echo "Your favorite color is red!";
break;
case "blue":
echo "Your favorite color is blue!";
break;
case "green":
echo "Your favorite color is green!";
break;
default:
echo "Your favorite color is neither red, blue, nor green!";
}
?>
8. PHP While Loop

Sama seperti bahasa pemrograman yang lain, perulangan pada PHP bias menggunakan
perulangan While ada dua perulangan while, yaitu while dan do while.
Contoh While :
<?php
$x = 1;
while($x <= 5) {
echo "The number is: $x <br>";
$x++;
}
?>

Contoh Do/While :
<?php
$x = 1;
do {
$x++;
} while ($x <= 5);
?>
9. PHP For Loop

Sama seperti bahasa pemrograman yang lain, perulangan pada PHP bisa menggunakan
perulangan FOR atau bisa juga menggunakan perulangan While.
<?php
for ($x = 0; $x <= 10; $x++) {
}
?>
10. PHP Functions
<?php
function writeMsg() {
echo "Hello world!";
}
writeMsg(); // call the function

?>
11. PHP Array

Dengan array, kita bisa membuat variabel dengan tipe yang dinamis, dimana kita bisa
menyimpan banyak data dalam satu variabel array.
Contoh Array Satu Dimensi
<?php
$cars = array("Volvo", "BMW", "Toyota");
echo "I like " . $cars[0] . ", " . $cars[1] . " and " . $cars[2] .
".";
?>

Dalam array multidimensi, tiap elemen dalam array utama dapat menjadi array, dan tiap
elemen pada sub-array dapat menjadi array pula.
Contoh Array Multidimensi
$cars = array
(
array("Volvo",22,18),
array("BMW",15,13),
array("Saab",5,2),
array("Land Rover",17,15)
);
12. PHP Include

Kita dapat memasukkan konten dari suatu file PHP ke dalam file PHP yang lain dengan
fungsi include() dan require(). Kedua fungsi tersebut fungsinya sama, hanya ada
perbedaan dalam mengatasi error.
include 'filename';
or
require 'filename';
13. PHP Cookie

Cookie adalah sebuah file kecil yang server tanamkan pada komputer user. Cookie
biasanya sering digunakan untuk mengidentifikasi user atau menyimpan informasi.
<?php
$cookie_name = "user";
$cookie_value = "Alex Porter";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/");
?>
<html>
<body>
<?php
if(!isset($_COOKIE[$cookie_name])) {
echo "Cookie named '" . $cookie_name . "' is not set!";
} else {
echo "Cookie '" . $cookie_name . "' is set!<br>";
echo "Value is: " . $_COOKIE[$cookie_name];
}
?>
</body>
</html>

14. PHP Session
PHP session digunakan untuk menyimpan user information pada server untuk digunakan
kemudian (username, password, dll). Meskipun begittu session bersifat temporer dan
akan dihapus jika user telah meninggalkan website. Jika ingin permanen, maka harus di
simpan ke dalam database.
Contoh Session Start :
<?php
// Start the session
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// Set session variables
$_SESSION["favcolor"] = "green";
$_SESSION["favanimal"] = "cat";
echo "Session variables are set.";
?>
</body>
</html>
Contoh Destroy Session :
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<body>
<?php
// remove all session variables
session_unset();
// destroy the session

session_destroy();
?>
</body>
</html>

B. Dasar – Dasar Database
Database yang digunakan adalah MySql.
1. Membuat Database baru dengan cara buka web brower masing – masing kemudian
ketikkan localhost/phpmyadmin pada url address browser anda, dan akan muncul
tampilan seperti berikut :
2. Selanjutnya membuat Database dan memberi nama Database dengan cara klik new pada
kiri tanpilan phpmyadmin dan beri nama database, kemudian klik create.

3. Membuat tabel dengan cara beri nama tabel yang akan dibuat, kemudian atur berapa field
yang akan digunakan, setelah itu klik go.
4. Maka akan muncul untuk mengisi field – field yang dibutuhkan, setelah diisi silahkan
klik save

5. Tampilan setelah membuat Database dan tabel beserta field.
C. Latihan
Buatlah Database dengan :
- Nama : db_nim(masing-masing)
Buat 4 Tabel dengan value :
tb_admin tb_member
id int(11), Primary A_I id int(11), Primary A_I
username varchar(20) id_member varchar(20), Primary
password varchar(50) username varchar(20)
email varchar(30)
tb_peminjaman tb_pengembalian
id_member varchar(20), Primary id_member varchar(20), Primary
judul_buku varchar(30) judul_buku varchar(30)
nama_peminjam varchar(30) nama_peminjam varchar(30)
tanggal_pinjam varchar(20), Primary tanggal_pinjam varchar(20), Primary
tanggal_kembali varchar(20), Primary tanggal_kembali varchar(20), Primary
keterangan text keterangan text
kembali varchar(10)

BAB V – IMPLEMENTASI CRUD DALAM PHP
Pratikan akan mempelajari tentang Implementasi CRUD (Create Read Update Delete).
1. Mampu mengoneksikan Php dan Database.

2. Mampu membuat CRUD pada php.
A. Koneksi Database
Membuat file koneksi dengan nama koneksi.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$database = "db_perpustakaan";
// Create connection
$conn = mysqli_connect($servername, $username, $password,
$database);
// Check connection
if (!$conn)
{
die("Connection failed:" . mysqli_connect_error());
}
?>
B. File Proses Peminjaman dan Pengembalian Buku

a. Buat file baru dengan nama proses_peminjaman_buku.php
<?php
include "koneksi.php";
$id = $_POST['Id'];
$judul = $_POST['Judul'];
$peminjam = $_POST['Peminjam'];
$tanggal_pinjam = $_POST['Tanggal_pinjam'];
$tanggal_kembali= $_POST['Tanggal_kembali'];
$keterangan = $_POST['Keterangan'];
$cekdata=mysqli_num_rows(mysqli_query($conn, "SELECT id_member

FROM tb_member WHERE id_member='$id'"));
if ($cekdata > 0) {
$sql = "INSERT INTO tb_peminjaman values (

'$id',
'$judul',
'$peminjam',

'$tanggal_pinjam',
'$tanggal_kembali',
'$keterangan'
)";
if
(empty($id)||empty($judul)||empty($peminjam)||empty($tanggal_pinjam)||
empty($tanggal_kembali))
{
echo "
<script>
alert('Isi Form Terlebih Dahulu ...');
window.location = 'peminjaman_buku.html';
</script>
";
}
else {
if(mysqli_query($conn, $sql))
{
echo "
<script>
alert('Input Berhasil ...');
window.location = 'admin.html';
</script>
";
}
}
}
else
{
echo "
<script>
alert('daftar dulu ...');
window.location = 'peminjaman_buku.html';
</script>
";
}
?>
Kemudian tambahkan source code <form action=”proses_peminjaman_buku.php”

method=”post”> pada file peminjaman_buku.html, letakkan source code tepat
dibawah <body> dan untuk tag penutup </form> diletakkan tepat diatas tag penutup
</body>

b. Buat file baru dengan nama proses_pengembalian_buku.php
<?php
$id = $_POST['Id'];
$kembali = $_POST['Kembali'];
$cekdata=mysqli_num_rows(mysqli_query($conn, "SELECT id_member

FROM tb_peminjaman WHERE id_member='$id'"));
if ($cekdata > 0) {
$sql = "INSERT INTO tb_pengembalian values (

'$id',
'$judul',
'$peminjam',
'$tanggal_pinjam',
'$tanggal_kembali',
'$keterangan',
'$kembali'
)";
if
(empty($id)||empty($judul)||empty($peminjam)||empty($tanggal_pinjam)
||empty($tanggal_kembali)||empty($kembali))
{
echo "
<script>
window.location =
'pengembalian_buku.html';
</script>
";
}
else {
if(mysqli_query($conn, $sql))
{
echo "
<script>
alert('Berhasil dikembalikan ...');
</script>
";
}
}
}
else
{

echo "
<script>
alert('data tidak ada ...');
window.location =
'pengembalian_buku.html';
</script>
";
}
?>
Kemudian tambahkan source code <form action=”proses_pengembalian_buku.php”

method=”post”> pada file pengembalian_buku.html, letakkan source code tepat
dibawah <body> dan untuk tag penutup </form> diletakkan tepat diatas tag penutup
</body>
C. File Transaksi Pinjam Dan Transaksi Kembali

a. Buat file baru dengan nama transaksi_peminjaman.php
<!DOCTYPE html>
<html>
<head>
table {
text-align: center;
}
h3, th{
text-align: center;
}
</style>
</head>
<body>
</div>
<div class="nav">
Jum'at - Sabtu (08.00 - 13.00)</p>
</div>
<ul>
<br><br>
<br><br><br>
<a href="transaksi_peminjaman.php"> >>
TRANSAKSI PINJAM</a>
</ul>
</div>

<div class="isi">
<h3>TRANSAKSI PEMINJAMAN BUKU !!!</h3>
<table border="1" align="center">
<tr>
<th>ID MEMBER</th>
<th>JUDUL BUKU</th>
<th>NAMA PEMINJAM</th>
<th>TANGGAL PINJAM</th>
<th>TANGGAL KEMBALI</th>
<th colspan="2">ACTION</th>
</tr>
<?php
$sql = "SELECT * FROM tb_peminjaman ORDER BY
tanggal_pinjam DESC , tanggal_kembali DESC";
$exec= mysqli_query($conn, $sql);
while ($result = mysqli_fetch_array($exec))
{
echo"
<tr>
<td> $result[id_member] </td>
<td> $result[judul_buku]</td>
<td> $result[nama_peminjam]</td>
<td> $result[tanggal_pinjam]</td>
<td> $result[tanggal_kembali]</td>
<td> <a
href=edit_peminjaman.php?id=$result[id_member]> Edit</a> </td>
<td> <a
href=delete_peminjaman.php?id=$result[id_member]>Delete </a>
</td>
</tr>
";
}
?>
</table>
</div>
</div>
</body>
</html>
Kemudian ganti tanda # pada <a href="#"> >> TRANSAKSI PINJAM</a>

dengan nama file transaksi_peminjaman.php yang berada pada file
peminjaman_buku.html

b. Buat file baru dengan nama transaksi_pengembalian.php
<!DOCTYPE html>
<html>
<head>
table {
text-align: center;
}
h3, th{
text-align: center;
}
</style>
</head>
<body>
</div>
<div class="nav">
Jum'at - Sabtu (08.00 - 13.00)</p>
</div>
<ul>
<br><br>
<br><br><br>
<a href="transaksi_pengembalian.php"> >>
TRANSAKSI KEMBALI</a>
</ul>
</div>
<div class="isi">
<h3>TRANSAKSI PENGEMBALIAN BUKU !!!</h3>
<table border="1" align="center">
<tr>
<th>ID MEMBER</th>
<th>JUDUL BUKU</th>
<th>NAMA PEMINJAM</th>
<th>TANGGAL PINJAM</th>
<th>TANGGAL KEMBALI</th>
<th>KEMBALI</th>
<th colspan="2">ACTION</th>
</tr>
<?php
$sql = "SELECT * FROM tb_pengembalian ORDER BY
tanggal_pinjam DESC , tanggal_kembali DESC";
$exec= mysqli_query($conn, $sql);
while ($result = mysqli_fetch_array($exec))
{

echo"
<tr>
<td> $result[id_member] </td>
<td> $result[judul_buku]</td>
<td> $result[nama_peminjam]</td>
<td> $result[tanggal_pinjam]</td>
<td> $result[tanggal_kembali]</td>
<td> $result[kembali]</td>
<td> <a
href=edit_pengembalian.php?id=$result[id_member]> Edit</a>
</td>
<td> <a
href=delete_pengembalian.php?id=$result[id_member]>Delete </a>
</td>
</tr>
";
}
?>
</table>
</div>
</div>
</body>
</html>
Kemudian ganti tanda # pada <a href="#"> >> TRANSAKSI KEMBALI</a>

dengan nama file transaksi_pengembalian.php yang berada pada file
pengembalian_buku.html
D. File Edit / Update Data

a. Buat file baru dengan nama edit_peminjaman.php
<!DOCTYPE html>
<html>
<head>
table {
padding-left: 30%;
}
input
{
width: 100%;
}
h3{
text-align: center;
}
</style>
</head>
<body onload="load();">

<?php
$id = $_GET['id'];
$sql = "SELECT * FROM tb_peminjaman WHERE
id_member='$id'";
$exec = mysqli_query($conn, $sql);
$result = mysqli_fetch_array($exec);
?>
<form action="proses_edit_peminjaman.php?id=<?php echo $id; ?>"
method="post">
</div>
<div class="nav">
Sabtu (08.00 - 13.00)</p>
</div>
<ul>
<br><br>
<br><br><br>
<a href="transaksi_peminjaman.php"> >> TRANSAKSI
PINJAM</a>
</ul>
</div>
<div class="isi">
<table>
<tr>
<td> ID MEMBER</td>
<td> : </td>
<td>
<input type="text" name="Id" value="<?php
echo"$result[id_member]"; ?>" readonly>
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Judul"
value="<?php echo"$result[judul_buku]"; ?>">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>

<input type="text" name="Peminjam"
value="<?php echo"$result[nama_peminjam]"; ?>">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Tanggal_pinjam"
value="<?php echo"$result[tanggal_pinjam]"; ?>">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Tanggal_kembali"
value="<?php echo"$result[tanggal_kembali]"; ?>">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Keterangan"
value="<?php echo"$result[keterangan]"; ?>">
</td>
</tr>
<tr>
<td></td><td></td>
<td>
<input type="submit" name="Tr_peminjaman"
value="EDIT">
</td>
</tr>
</table>
</div>
</div>
</form>
<script>
function load(){
var mydate=new Date()
var year=mydate.getFullYear()
var day=mydate.getDate()
var month=mydate.getMonth()
var dino=mydate.getDay()
var hari=new
Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu");

alert("Hari : "+hari[dino]+"\nTanggal :
"+day+"/"+parseInt(month+1)+"/"+year)
}
</script>
</body>
</html>
b. Buat file baru dengan nama edit_pengembalian.php
<!DOCTYPE html>
<html>
<head>
table {
padding-left: 30%;
}
h3{
text-align: center;
}
</style>
</head>
<body onload="load();">
<?php
$id = $_GET['id'];
$sql = "SELECT * FROM tb_pengembalian WHERE
id_member='$id'";
$result = mysqli_fetch_array($exec);
?>
<form action="proses_edit_pengembalian.php?id=<?php echo $id; ?>"
method="post">
</div>
<div class="nav">
Sabtu (08.00 - 13.00)</p>
</div>
<ul>
<br><br>
<br><br><br>
<a href="transaksi_pengembalian.php"> >> TRANSAKSI
PINJAM</a>
</ul>
</div>
<div class="isi">

<table>
<tr>
<td> ID MEMBER</td>
<td> : </td>
<td>
<input type="text" name="Id" value="<?php
echo"$result[id_member]"; ?>" readonly>
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Judul"
value="<?php echo"$result[judul_buku]"; ?>">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Peminjam"
value="<?php echo"$result[nama_peminjam]"; ?>">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Tanggal_pinjam"
value="<?php echo"$result[tanggal_pinjam]"; ?>">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Tanggal_kembali"
value="<?php echo"$result[tanggal_kembali]"; ?>">
</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="text" name="Keterangan"
value="<?php echo"$result[keterangan]"; ?>">

</td>
</tr>
<tr>
<td>
</td>
<td> : </td>
<td>
<input type="checkbox" name="Status"
value="VALID">VALID
<input type="checkbox" name="Status"
value="GAGAL">GAGAL
</td>
</tr>
<tr>
<td></td><td></td>
<td>
<input style="width: 100%;" type="submit"
name="Tr_pengembalian" value="EDIT">
</td>
</tr>
</table>
</div>
</div>
</form>
<script>
function load(){
var mydate=new Date()
var year=mydate.getFullYear()
var day=mydate.getDate()
var month=mydate.getMonth()
var dino=mydate.getDay()
var hari=new
Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu");
alert("Hari : "+hari[dino]+"\nTanggal :
"+day+"/"+parseInt(month+1)+"/"+year)
}
</script>
</body>
</html>

E. Proses Edit / Update Data
a. Buat file baru dengan nama proses_edit_peminjaman.php
<?php
$id = $_GET['id'];
$sql = "UPDATE tb_peminjaman SET judul_buku = '$judul',

nama_peminjam = '$peminjam', tanggal_pinjam =
'$tanggal_pinjam', tanggal_kembali = '$tanggal_kembali',
keterangan = '$keterangan' WHERE id_member = '$id'";
if (mysqli_query($conn, $sql)) {
echo "
<script>
alert('Update Berhasil ...');
window.location =
'transaksi_peminjaman.php';
</script>
";
} else {
echo "
<script>
window.alert('Update Data Gagal');
</script>
";
}
?>
b. Buat file baru dengan nama proses_edit_pengembalian.php
<?php
$id = $_GET['id'];
$status = $_POST['Status'];
$sql = "UPDATE tb_pengembalian SET judul_buku =

'$judul', nama_peminjam = '$peminjam', tanggal_pinjam =
'$tanggal_pinjam', tanggal_kembali = '$tanggal_kembali',
keterangan = '$keterangan', kembali = '$status' WHERE
id_member = '$id'";

if (mysqli_query($conn, $sql)) {
echo "
<script>
alert('Update Berhasil ...');
window.location =
'transaksi_pengembalian.php';
</script>
";
} else {
echo "
<script>
window.alert('Update Data Gagal');
</script>
";
}
?>
F. Delete Proses
a. Buat file baru dengan nama delete_peminjaman.php
<?php
$id = $_GET['id'];
$sql = "DELETE FROM tb_peminjaman WHERE id_member
='$id'";
if ($exec)
{
echo "
<script>
alert('Delete Berhasil ...');
window.location =
'transaksi_peminjaman.php';
</script>
";
}
else
{
echo "Proses hapus gagal";
}
?>
b. Buat file baru dengan nama delete_pengembalian.php

<?php
$id = $_GET['id'];
$sql = "DELETE FROM tb_pengembalian WHERE id_member
='$id'";
if ($exec)
{
echo "

<script>
alert('Delete Berhasil ...');
window.location =
'transaksi_pengembalian.php';
</script>
";
}
else
{
echo "Proses hapus gagal";
}
?>

BAB VI – IMPLEMENTASI LOGIN DALAM PHP
Pratikan akan mempelajari tentang Proses login dalam PHP.
1. Mampu membuat proses Register.

2. Mampu membuat proses Login.
3. Mampu membuat proses Logout.
A. Proses Register
Buat file baru dengan nama proses_register_member.php
<?php
$id = $_POST['Id'];
$username = $_POST['Username'];
$email = $_POST['Email'];
$sql = "INSERT INTO tb_member values

('','$id','$username','$email')";
if (empty($id)||empty($username)||empty($email))
{
echo "
<script>
window.location = 'register_member.html';
</script>
";
}
else
{
if (mysqli_query($conn, $sql))
{
echo "
<script>
alert('Register Berhasil ...');
</script>
";
}
else
{
echo "
<script>
alert('Error :". $sql . "<br>" .
"mysqli_error($conn)');
window.location = 'register_member.html';

</script>
";
}
}
?>
Kemudian ganti tanda # pada <form action> yang berada di halaman register_member.html
dengan nama file proses register (proses_register_member.php) dan method “post”.
B. Proses Login
Buat file baru dengan nama login_proses.php
<?php
include 'koneksi.php';
$username = $_POST['Username'];
$password = $_POST['Password'];
$sql = "SELECT * FROM tb_admin WHERE username = '$username'";

$result = mysqli_query($conn, $sql);
if (empty($username)||empty($password))
{
echo "
<script>
window.location = 'index.html';
</script>
";
}
else
{
if ($result)
{
$row = mysqli_fetch_array($result);
$passcheck = $row["password"];
if ($password == $passcheck)
{
//Creating Sessions Variable
$_SESSION['Username'] = $row['username'];
$_SESSION['Password'] = $row['password'];
header('location:admin.html');
}
else
{
echo "
<script>
alert('Isi Username dan Password dengan
BENAR ...');
</script>
";
}
}

else
{
echo "
<script>
</script>
";
}
}
?>
Kemudian ganti tanda # pada <form action> yang berada di halaman login.html dengan
nama file proses login (login_proses.php) dan method “post”.
C. Proses Logout
Buat file baru dengan nama logout.php
<?php
session_start();
session_unset();
session_destroy();
echo "
<script>
alert('Logout Berhasil ...');
</script>
";
?>

Web 2018

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web 2018

Uploaded by

Copyright:

Available Formats

PANDUAN PRATIKUM

Lab. Pemrograman dan Rekayasa Perangkat Lunak

Lab. Rpl Informatika ITN Malang 2018

B. Struktur Dasar HTML

Lab. Rpl Informatika ITN Malang 2018

C. Tag – Tag Dasar HTML

Lab. Rpl Informatika ITN Malang 2018

Lab. Rpl Informatika ITN Malang 2018

Lab. Rpl Informatika ITN Malang 2018

Lab. Rpl Informatika ITN Malang 2018

Lab. Rpl Informatika ITN Malang 2018

Lab. Rpl Informatika ITN Malang 2018

10. HTML Form

Lab. Rpl Informatika ITN Malang 2018

Lab. Rpl Informatika ITN Malang 2018

Lab. Rpl Informatika ITN Malang 2018

Lab. Rpl Informatika ITN Malang 2018

11. HTML Comment

Lab. Rpl Informatika ITN Malang 2018

<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00), Jum'at - Sabtu

<a href="index.html"> >> HOME</a>

<p>Selamat Datang di Perpustakaan Kami.</p>

<h4>CopyRight &copy; Lab. Rpl ITN Malang 2018</h4>

Sehingga tampilan halaman index sebagai berikut :

Lab. Rpl Informatika ITN Malang 2018

<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00), Jum'at - Sabtu

<a href="index.html"> >> HOME</a>

<p>Perpustakaan ini terletak di kawasan Malang</p>

<h4>CopyRight &copy; Lab. Rpl ITN Malang 2018</h4>

Sehingga tampilan halaman about sebagai berikut :

Lab. Rpl Informatika ITN Malang 2018

<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00), Jum'at - Sabtu

<a href="index.html"> >> HOME</a>

<p>Perpustakaan ini terletak di kawasan Malang</p>

<h4>CopyRight &copy; Lab. Rpl ITN Malang 2018</h4>

Sehingga tampilan halaman contact sebagai berikut :

Lab. Rpl Informatika ITN Malang 2018

<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00), Jum'at - Sabtu

<a href="index.html"> >> HOME</a>

<h4>CopyRight &copy; Lab. Rpl ITN Malang 2018</h4>

Lab. Rpl Informatika ITN Malang 2018

Sehingga tampilan halaman login sebagai berikut :

5. Membuat halaman admin.html

<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00), Jum'at - Sabtu

<a href="register_member.html">REGISTER MEMBER</a>

<h2>Selamat Datang Admin !!</h2>

<h4>CopyRight &copy; Lab. Rpl ITN Malang 2018</h4>

Lab. Rpl Informatika ITN Malang 2018

6. Membuat halaman register_member.html

<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00), Jum'at - Sabtu

<a href="admin.html"> >> ADMIN</a>

<h3>REGISTER MEMBER !!!</h3>

Lab. Rpl Informatika ITN Malang 2018

<h4>CopyRight &copy; Lab. Rpl ITN Malang 2018</h4>

Sehingga tampilan halaman register member sebagai berikut :

Lab. Rpl Informatika ITN Malang 2018

<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00), Jum'at - Sabtu

<a href="admin.html"> >> ADMIN</a>

<h3>PEMINJAMAN BUKU !!!</h3>

Lab. Rpl Informatika ITN Malang 2018

<h4>CopyRight &copy; Lab. Rpl ITN Malang 2018</h4>

Sehingga tampilan halaman peminjaman buku sebagai berikut :

Lab. Rpl Informatika ITN Malang 2018

<p>Jadwal Buka : Senin - Kamis (08.00 - 16.00), Jum'at - Sabtu

<h4>CopyRight © Lab. Rpl ITN Malang 2018</h4>

<h4>CopyRight © Lab. Rpl ITN Malang 2018</h4>

<h4>CopyRight © Lab. Rpl ITN Malang 2018</h4>

<h4>CopyRight © Lab. Rpl ITN Malang 2018</h4>

<h4>CopyRight © Lab. Rpl ITN Malang 2018</h4>

<h4>CopyRight © Lab. Rpl ITN Malang 2018</h4>

<h4>CopyRight © Lab. Rpl ITN Malang 2018</h4>

<h4>CopyRight © Lab. Rpl ITN Malang 2018</h4>