i

ODUL PRAKTIKUM PEMROGRAMAN BERBASIS WEB

Tim Penyusun : Koswara

Nur Salimah
Yasya Nurussilmi
Tri Widiarman
Makuryatul Fitria
Farras Fauzan
Kahfi Deli Hudaya

Modul ini dicetak untuk panduan praktikum.

Dicetak Februari, 2021 oleh Laboratorium Informatika FT UMJ

Laboratorium Informatika
Program Studi Teknik Informatika, Fakultas Teknik, Universitas Muhammadiyah Jakarta
Jalan Cempaka Putih Tengah 27, Jakarta 10510
Telepon: (021)70329963
Website: http://if.umj.ac.id/laboratorium/
Email: [email protected]

ii
 LEMBAR PENGESAHAN
MODUL PRAKTIKUM PEMROGRAMAN BERBASIS WEB

Telah disetujui dan disahkan sebagai

Modul kuliah praktikum Pemrograman Berbasis Web

Disahkan di : Jakarta
Pada Tanggal : Februari 2021

Menyetujui,
Kepala Laboratorium Program Studi Teknik Informatika
Fakultas Teknik Universitas Muhammadiyah Jakarta

Sitti Nurbaya Ambo, MMSI

NIDN: 0307067901

Mengesahkan,
Ketua Program Studi Teknik Informatika
Fakultas Teknik Universitas Muhammadiyah Jakarta

Popy Meilina, M.Kom

NIDN: 0305057901

iii
 KATA PENGANTAR
Assalamua’alaikum wr. wb.
Bismillahirrohmanirrohiim

Dengan segala doa dan harapan, modul praktikum Pemrograman Berbasis Web ini
diharapkan dapat menjadi panduan yang baik dan jelas bagi siapapun yang membacanya.
Modul ini akan digunakan dalam proses belajar praktikum Pemrograman Berbasis Web.

Tahun ini, Laboratorium Informatika FT-UMJ bekerja sama dengan dosen pengampu mata
kuliah Pemrograman Berbasis Web berusaha untuk menyelaraskan pelaksanaan praktikum
dengan pelaksanaan kuliah di kelas. Dengan usaha tersebut kami berharap penyerapan materi
Pemrograman Berbasis Web oleh para mahasiswa dapat lebih efektif, sehingga pada akhir
semester hasil evaluasi belajar mahasiswa dapat lebih meningkat dibandingkan dengan tahun-
tahun yang lalu.

Sebagai penutup, saya ucapkan banyak-banyak terima kasih kepada semua pihak yang telah
membantu terselesaikannya modul ini, dosen-dosen pengampu mata kuliah Pemrograman
Berbasis Web, serta tim penyusun modul laboratorium informatika FT-UMJ atas seluruh
dedikasi yang diberikan kepada Lab tercinta.

Terima kasih sebelumnya kami sampaikan kepada para pembaca modul ini, semoga ilmu
yang telah dipelajari dapat bermanfaat dan semakin berkembang di tangan anda semua.

Wassalamu’alaikum wr. wb.

Jakarta, Oktober 2021
Laboratorium Informatika FT-UMJ,

Tim Penyusun

iv
 DAFTAR ISI

LEMBAR PENGESAHAN............................................................................................iii

KATA PENGANTAR....................................................................................................iv

Tim Penyusun..............................................................................................................iv

DAFTAR ISI..................................................................................................................v

MODUL 1 : PENGENALAN CLIENT DAN LOCAL SERVER (XAMPP).....................8

1.1 Pengertian XAMPP.............................................................................................8

1.2 Fungsi XAMPP....................................................................................................8

1.3 Cara Install XAMPP.............................................................................................8

1.4 Cara Menjalankan XAMPP.................................................................................9

MODUL 2 : PERANCANGAN INTERFACE/ANTARMUKA.......................................11

2.1 User Interface Design....................................................................................11

2.2 Prinsip - Prinsip Umum User Interface..........................................................11

2.3 Dokumentasi Perancangan UI (Balsamiq Mockup).......................................13

2.4 Tugas Akhir Modul 1......................................................................................15

MODUL 3 : HTML (HYPERTEXT MARKUP LANGUAGE)........................................16

3.1 Pengenalan HTML.........................................................................................16

3.2 Basic Tag HTML............................................................................................16

3.3 Tabel dan Image Pada HTML.......................................................................19

3.4 Form Pada HTML..........................................................................................22

3.5 Tugas Akhir Modul 3......................................................................................25

MODUL 4 : CSS (CASCADING STYLE SHEET).......................................................27

4.1 Pengenalan CSS...........................................................................................27

4.2 Struktur Penulisan CSS.................................................................................27

v
 4.3 Jenis-jenis Selector CSS...............................................................................28

4.4 Cara Penggunaan CSS.................................................................................29

4.5 Bekerja Dengan CSS.....................................................................................30

4.6 Tugas Akhir Modul 4........................................................................................33

MODUL 5 FRAMEWORK CSS (BOOTSTRAP).........................................................34

5.1 Apa Itu Framework ?.....................................................................................34

5.2 Bootstrap........................................................................................................34

5.3 Komponen Utama Bootstrap.........................................................................34

5.4 Cara Install Bootstrap....................................................................................35

5.5 Tugas Akhir Modul 4......................................................................................37

MODUL 6 : PHP dan MySQL.....................................................................................38

6.1 BAHASA PEMROGRAMAN BERBASIS WEB.................................................38

6.2 PENGENALAN PHP......................................................................................38

6.3 MEMULAI PHP..............................................................................................38

6.4 VARIABLE.....................................................................................................39

6.5 INCLUDE dan REQUIRE...............................................................................40

6.6 POST dan GET..............................................................................................41

6.7 PHP dan MySQL............................................................................................44

6.7.1 MENAMPILKAN DATA DARI DATABASE....................................................45

BAB 7 : FRAMEWORK PHP : LARAVEL...................................................................46

7.1 Framework PHP : Laravel.................................................................................46

7.2 Model-View-Control (MVC) dan Routing...........................................................46

7.3 Cara Install Laravel...........................................................................................47

7.4 Membuat Web Sederhana dengan Laravel.....................................................51

BAB 8 : CRUD (CREATE-READ-UPDATE-DELETE) PADA LARAVEL..................65

vi
 8.1 Create-Read......................................................................................................65

8.2 Update-Delete...................................................................................................74

DAFTAR PUSTAKA....................................................................................................84

vii
viii
 MODUL 1 : PENGENALAN CLIENT
DAN LOCAL SERVER (XAMPP)

1.1 Pengertian XAMPP

XAMPP adalah web server open source yang berjalan pada sistem operasi cross-
platform (Windows, Linux, MacOS). Semua yang diperlukan untuk mengelola website
tersedia di XAMPP seperti Apache, MySQL/MariaDB, PHP, dan Perl. Meski program di
dalamnya lengkap, XAMPP tetap merupakan web server yang sederhana dan ringan.

XAMPP dipakai untuk membuat web server lokal di komputer. Hal ini akan

memudahkan Anda dalam mengembangkan, mendesain, dan keperluan testing website. 

1.2 Fungsi XAMPP

1. Setting Database phpMyAdmin

Dengan menggunakan XAMPP Anda bisa mengakses halaman phpMyAdmin.

Sama seperti saat Anda menggunakan hosting atau VPS pasti Anda akan
membutuhkan phpMyAdmin untuk mengedit, menghapus, menambah database,
dan menambahkan user.

Di XAMPP Anda juga bisa melakukan hal yang sama. Bedanya di XAMPP
Anda tidak perlu khawatir terjadi error database karena semua perubahan yang
dilakukan hanya pada server lokal komputer. 

2. Menjalankan Laravel Pada Komputer

Laravel adalah salah satu framework php yang dipakai untuk mempermudah
developer dalam mengembangkan website. Dengan menjalankan Laravel pada
localhost komputer Anda menggunakan XAMPP, Anda jadi lebih mudah untuk
memodifikasi script dan membuat fitur baru website tanpa harus takut merusak kode
inti website yang ada di server.

1.3 Cara Install XAMPP

Untuk melakukan instalasi XAMPP, Anda bisa mengikuti langkah berikut:

1. Download XAMPP melalui website resminya.

9
 2. Lakukan instalasi XAMPP sesuai panduan (wizard) yang ditampilkan dan pilih
Yes untuk melanjutkan instalasi.

3. Pilih komponen yang Anda butuhkan dalam instalasi tersebut. Sebagai contoh,
centang MySQL dan phpMyAdmin.

4. Tentukan direktori instalasi yang tepat, misalnya C:\xampp.

1.4 Cara Menjalankan XAMPP

Untuk menjalankan XAMPP, pertama buka aplikasi XAMPP yang telah Anda install.
Lalu klik Start pada module Apache dan MySQL.

(Gambar Control Panel XAMPP setelah di klik Start)

Setelah keduanya berjalan tanpa error, silahkan akses localhost menggunakan link berikut:

http://localhost

Atau

127.0.0.1

10
Maka Anda akan diarahkan ke halaman dashboard XAMPP, seperti pada gambar di bawah
ini.

Langkah-langkah diatas adalah dasar menggunakan XAMPP, pada langkah

berikutnya kami akan memberikan cara menggunakan XAMPP untuk install WordPress dan
Laravel.

11
 MODUL 2 : PERANCANGAN INTERFACE/ANTARMUKA
2.1 User Interface Design
Desain Antarmuka Pengguna (bahasa Inggris: User Interface Design) atau rekayasa
antarmuka pengguna adalah desain untuk komputer, peralatan, mesin, perangkat komunikasi
mobile, aplikasi perangkat lunak, dan situs web yang berfokus pada pengalaman pengguna
(bahasa Inggris: User Experience) dan interaksi.

Tujuan dari Desain Antarmuka Pengguna adalah untuk membuat interaksi pengguna
sesederhana dan seefisien mungkin, dalam hal mencapai tujuan pengguna—atau apa yang
sering disebut dengan user-centered design. Desain Antarmuka Pengguna yang baik dapat
memberikan penyelesaian pekerjaan dengan menggunakan tangan tanpa menarik perhatian
yang tidak perlu terhadap dirinya sendiri.

2.2 Prinsip - Prinsip Umum User Interface

Dalam perancangan antarmuka, ada beberapa prinsip yang harus diperhatikan :
No. Prinsip User Interface Penjelasan
Seorang perancang sistem harus benar-benar paham tentang
pengetahuan, cara berpikir dan cara menerima informasi dari
1. User Compatibility
user sehingga sistem yang nantinya akan digunakan oleh user
dapat membuat user lebih produktif.
Sebuah aplikasi yang bertopengkan interface harus sesuai
dengan sistem aslinya. Seringkali sebuah aplikasi
menghasilkan hasil yang berbeda dengan sistem manual atau
2. Product Compatibality sistem yang ada. Hal tersebut sangat tidak diharapkan dari
perusahaan karena dengan adanya aplikasi software
diharapkan dapat menjaga produk yang dihasilkan dan
dihasilkan produk yang jauh lebih baik.
Rancanglah interface sistem sesuai dengan tugas dari user,
jangan samapi user kesulitan untuk menggunakannya, karena
3. Task Compatibality hal ini dapat menyebabkan aplikasi yang kita buat tidak akan
terpakai dan akhirnya tidak dapat membantu pekerjaan /
tugas user.
Selalu mengorganisasikan setiap fungsinya sesuai dengan
kategori fungsinya sehingga dapat memfasilitasi segala
perubahan tugas user. Selain itu user jangan dibingungkan
4. Work Flow Compatibality
dengan pilihan-pilihan menu yang terlalu banyak dan
semestinya menu-menu merupakan urutan dari runutan
pekerjaan.

12
No. Prinsip User Interface Penjelasan
Prinsip ini sudah jelas, bahwa sistem harus konsisten
terhadap fungsionalitas / kegunaan dari sistem tersebut.
5. Consistency Contoh sederhananya adalah ketika user menekan tombol
“save” maka proses yang terjadi adalah penyimpanan bukan
hapus data.
Gunakanlah konsep, terminologi dan pengaturannya yang
mudah dipahami oleh user. Seperti ikon atau gambar
6. Familiarity “Recycle Bin” pada Sistem Operasi Windows, ini
membuktikan bahwa fokus user terhadap gambar tersebut
adalah file-file yang sudah dihapus sebelumnya.
Kesederhanaan perlu diperhatikan pada saat membangun
interface. Tidak selamanya interface yang memiliki menu
7. Simplicity banyak adalah interface yang baik. Kesederhanaan disini
lebih berarti sebagai hal yang ringkas dan tidak terlalu
berbelit.
Maksud dari prinsip ini adalah user dapat langsung
menyaksikan aksi sistem pada suatu objek. Contoh
8. Direct Manipulation
sederhana, pada saat kita menekan mengetikkan huruf “A”
maka di layar akan langsung muncul huruf “A”.
Prinsip control ini berkenaan dengan sifat user yang
mempunyai tingkat konsentrasi yang berubah-ubah. Hal itu
akan sangat mengganggu proses berjalannya sistem. Kejadian
salah ketik atau salah entry merupakan hal yang biasa bagi
9. Control
seorang user. Akan tetapi hal itu akan dapat mengganggu
sistem dan akan berakibat sangat fatal karena salah
memasukkan data 1 digit/1 karakter saja informasi yang
dihasilkan sangat dimungkinkan salah.
WYSIWYG (What You See Is What You Get), artinya adanya
korespondensi satu ke satu antara informasi di layar dengan
informasi di printed-output atau file. Contoh, pada saat kita
10. WYSIWYG membuat laporan menggunakan Microsoft Office lalu
mencetaknya (print out) laporan tersebut, maka hasil print
out harus sama dengan yang ada pada lembar kerja Microsoft
Office.
Prinsip ini merupakan prinsip yang sangat penting bagi user
dengan keterbatasan fisik. Ini berarti mengijinkan banyak
kontrol dari user yang mendukung untuk menggunakan
11. Flexibility aplikasi yang kita rancang dan mampu mengakomodir
kemampuan user yang lain. Seperti aplikasi yang dapat
didukung oleh perangkat lain (mouse, keyboard,
joystick,trackball).
Setelah memberikan inputan atau memasukkan data ke
12. Responsiveness aplikasi system melalui interface, sebaiknya sistem langsung
memberi tanggapan/respon dari hasil data yang diinputkan.
Secara umum, user mempunyai keingintahuan sebuah
kecanggihan dari aplikasi yang digunakannya. Untuk itu
aplikasi yang dibuat hendaknya mempunyai kelebihan yang
13. Invisible Technology
tersembunyi. Bisa saja kelebihan itu berhubungan dengan
sistem yang melingkupinya atau bisa saja kecanggihan atau
kelebihan itu tidak ada hubungannya.
Sistem harus mampu mentolerir kesalahan manusia baik
disengaja maupun tidak disengaja dan yang umunya tidak
14. Robustness
dapat dihindari. Menyediakan Recovery System merupakan
hal yang baik untuk mengimplementasikan prinsip ini.
No. Prinsip User Interface Penjelasan
15. Protection Prinsip ini berbeda dengan prinsip Robustness, karena pada
prinsip ini sistem seharusnya memproteksi kesalahan-
13
 kesalahan umum manusia. Seperti pada saat kita menutup
lembar kerja Microsoft Office yang belum kita simpan
sebelumnya, maka Office akan secara otomatis memberikan
konfirmasi untuk menyimpannya atau tidak.
Buatlah sistem yang mudah dipelajari bagi user novice
16. Ease of Learn (awam). Hal ini akan memberikan motivasi kepada user
tersebut untuk menggunakannya.
Buatlah sistem yang mudah digunakan untuk expert user.
Sehingga sistem yang kita bangun tidak hanya dipakai untuk
17. Ease to Use
novice user tetapi bisa juga dipakai untuk user yang sudah
ahli (berpengalaman).

2.3 Dokumentasi Perancangan UI (Balsamiq Mockup)

Balsamiq Mockup adalah aplikasi yang sangat berguna jika kalian adalah seorang
designer terutama di bidang web. Mockups biasanya di gunakan oleh para designer untuk
memulai suatu coretan-coretan, dengan kata lain kalian nggak perlu lagi menggunakan pensil
untuk merancang suatu interface. Untuk lembar kerja aplikasinya bisa kalian liat di
screenshoot di bawah :

Untuk menginstall aplikasi ini, PC kalian haruslah telah terpasang Aplikasi AdobeAir, karena
Mockups berjalan diatas aplikasi adobeair tersebut.

Cara menggunakan balsamiq mockup itu cukup mudah sekali, untuk setiap komponen yang
ingin kita gunakan misalnya : Menu Bar, Combobox, Radio Button, Search Box, Text Area,
dll, hanya tinggal drag dan drop saja. Dan di pojok kiri, terdapat menu pencarian. Misalnya
kita mau pake Text Field, kita tidak perlu scroll pada list komponen yang ada, kita cukup
14
ketik 'Text Field' tidak pelru lengkap, misalnya ketika kita mengetikkan "Te" maka seluruh
yang berkaitan dengan yang kita ketikkan akan keluar, semacam autocomplete. Berikut
adalah contoh penggunaan balsamiq, disini kita mencoba untuk membuat mockup UI (User
Interface) dari situs youtube.com.

15
2.4 Tugas Akhir Modul 1
Kerjakanlah tugas berikut ini !
1. Buatlah sebuah mockup user interface (login, register, dan halaman utama) dari situs-
situs e-commerce !
2. Butalah sebuah desain mockup user interface (login, register, dan halaman utama) untuk
membangun website atau sistem yang ingin kalian buat !

16
 MODUL 3 : HTML (HYPERTEXT MARKUP LANGUAGE)
3.1 Pengenalan HTML
Internet lebih tepatnya www disusun menggunakan bahasa HTML. HTML sendiri
singkatan dari Hypertext Markup Language, sebuah bahasa yang telah di standarkan untuk
menyusun tampilan web. HTML ini lah yang nanti amat berperan dalam membangun
layout/tampilan website.

HTML terdiri dari sejumlah perintah dimana kita bisa men-set judul, garis, table,
gambar dan lain- lain yang disebut tag. Setiap tag masih dapat dilengkapi lagi oleh sejumlah
attribute. Dibawah ini sebagian contoh tag dan attributenya:

<html>
<head>
<title>Praktikum IMK </title>
</head>
<body bgcolor=”red”>
<font face=”arial black” color=”yellow” size=”5”>HELLO WORD !</font>
</body>
</html>

Tulisan yang ditebalkan adalah tag, sedangkan tulisan yang tidak ditebalkan adalah attribute
dan tulisan yang miring adalah nilai/value dari attribute. Tag tidak case sensitive, jadi anda
bisa gunakan <HTML> atau <html> keduanya menghasilkan output yang sama.

3.2 Basic Tag HTML

3.2.1 Block Level Element

Nama Tag/Element Tag/Element Keterangan

diguakan sebagai judul dalam sebuah
Heading <h1></h1> s.d <h6></h6>
paragraph.
 digunakan untuk membagi teks
Paragraph <p></p> kedalam beberapa paragraph.
 Attribut : align

17
 Nama Tag/Element Tag/Element Keterangan
digunakan untuk mengelompokkan data
List (Bullet List) <ul><li></li></ul>
berurutan dengan format bullet
 digunakan untuk mengelompokkan
data berurutan dengan format
List (Number List) <ol><li></li></ol>
numbering
 attribut : type
 digunakan untuk menggambar garis
Horizontal Rules <hr> horizontal dalam document HTML
 attribut : align, width, size, noshade

Contoh Program :
test.html
<html>
<head>
<title>Praktikum IMK</title>
</head>
<body>
<h1>Belajar HTML</h1>
<hr>
<p>HTML adalah singkatan dari Hypertext Markup Language</p>
<p>Block Level Element :</p>
<ol>
<li>Heading</li>
<li>Paragraph</li>
<li>List :</li>
<ol type="a">
<li>bullet</li>
<li>Numbering</li>
</ol>
</ol>
<p>Text Level Element :</p>
<ul>
<li>Breakline</li>
<li>Formating Text</li>
<li>Hyperlink</li>
</ul>
</body>
</html>

3.2.2 Text Level Element

Nama Tag/Element Tag/Element Keterangan

Break <br> digunakan untuk memulai baris baru pada
document HTML
Nama Tag/Element Tag/Element Keterangan
Font <font></font>  digunakan untuk menentukan format
tampilan font dalam document
18
 HTML.
 attribut : color, size, face
Format Text <b></b> bold text
<i></i> italic text
<u></u> underline text
 superscript text
 subscript text
<strike></strike> untuk memberi garis ditengah text
Hyperlink <a></a>  digunakan untuk menentukan
hyperlink dalam document HTML.
Properti HREF digunakan untuk
menentukan tujuan dari hyperlink
tersebut.
 attribut : href, target
Grouping element <div></div> digunakan untuk mengelompokkan
<span></span> elementelement HTML. Span digunakan
untuk mendefinisikan text-level content,
sementara div digunakan untuk block-
level content.

Contoh Program :
test1.html
<html>
<head>
<title>Praktikum IMK</title>
</head>
<body>
<center>
<b>Praktukum Modul 2</b> <br>
<font face="Agency FB" size="6" color="red">HTML <i>(Hypertext Markup
Language)</i></font>
</center>
<hr>
<p>
HTML adalah _sebuah bahasa yang telah distandarkan untuk menyusun tampilan
^web<br>
HTML ini lah yang nanti amat berperan dalam membangun layout/tampilan website.
</p>
<a href="test2.html" target="_blank">Menuju Ke Page 2</a>
</body>
</html>

test2.html
<html>
<head>
<title>Praktikum IMK</title>
</head>
<body>
<center>

19
<font face="arial" size="8" color="green">Welcome to Page 2</i></font>
</center>
<hr>
<p>
HTML terdiri dari sejumlah perintah dimana kita bisa men-set judul, garis, table,
gambar dan lain- lain yang disebut tag.<br>
Setiap tag masih dapat dilengkapi lagi oleh sejumlah attribute.
</p>
<a href="test1.html">Kembali Ke Page 1</a>
</body>
</html>

3.3 Tabel dan Image Pada HTML

3.3.1 Table HTML
Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-
kolom. Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table>
adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat
baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-
kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan
data-data yang akan di tampilkan. Berikut adalah ilustrasi penggambaran struktur table di HTML :

<table>

<tr><td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td></tr>

<tr><td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td></tr>

<tr><td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td></tr>

</table>

Contoh Program :

<html>
<head>
<title>Praktikum IMK</title>
</head>
<body>
<h2>Tabel HTML</h2>
<table border="1">
<tr>
20
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Baris 3 Kolom 1</td>
<td>Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>

Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai
kebutuhan bentuk tabel yang diinginkan. Untuk menggabungkan kolom dalam tabel
digunakan atribut colspan, sedangkan untuk menggabungkan baris dalam tabel digunakan
atribut rowspan. Berikut adalah ilustrasi penggambaran struktur penggabungan kolom dan baris
table di HTML :

<table>

<tr><td colspan=”1”> Gabung Baris 1 Kolom 1 dan Baris 1 Kolom 2</td></tr>

<td>Baris 2 Kolom 2</td></tr>

<tr>
<td rowspan=”2”>
Gabung Baris 2 Kolom 1 dan Baris 3 Kolom 1
</td> <tr><td>Baris 3 Kolom 2</td></tr>

</table>

Contoh Program :
<html>
<head>
<title>Praktikum IMK</title>
</head>
<body>
<h2>Tabel HTML</h2>
<table border="1" bgcolor="dcdcdc" width="50%" cellpadding="8" cellspacing="8">
<tr>
<td colspan="2" bgcolor="daa520">Gabung Baris 1 Kolom 1 dan Baris 1 Kolom 2</td>
</tr>
<tr>

21
<td rowspan="2" bgcolor="daa520">Gabung Baris 2 Kolom 1 dan Baris 3 Kolom 1</td>
<td bgcolor="00ced1">Baris 2 Kolom 2</td>
</tr>
<tr>
<td bgcolor="00ced1">Baris 3 Kolom 2</td>
</tr>
</table>
</body>
</html>

3.3.2 Image HTML

Untuk format gambar ada 3 macam yang sering digunakan yaitu: GIF, JPG dan PNG. GIF dan
PNG bisa digunakan untuk membuat gambar yang transparan serta biasa juga digunakan untuk
gambar yang warnanya minim seperti untuk logo, banner, icon, dsb, Gif bisa membuat gambar
animasi juga. Untuk menampilkan gambar yang berkualitas bagus dengan warna yang memadai
digunakan format JPG.
Untuk memasukkan gambar ke dalam dokumen HTML digunakan elemen img di ikuti
dengan src (source) sebagai sumber atau lokasi dari gambar.

Tag/Element Image pada HTML :

<img src="lokasi gambar" />

Ketika memasukkan gambar ke dalam dokumen HTML ada tiga atribut yang sangat penting
harus selalu disertakan dengan elemen img yaitu align, alt, width dan height. Alt (alternate)
adalah sebagai teks alternatif yang ditampilkan oleh browser ketika gambar tidak dapat
ditampilkan atau ditemukan, Align digunakan untuk menentukan posisi image terhadap text.
sedangkan width dan height adalah ukuran lebar dan tinggi gambar dalam satuan pixel(px).
Contoh Program :
<html>
<head>
<title>Praktikum IMK</title>
</head>
<body>
<center>
<h2>IMAGE HTML</h2>
<table bgcolor="DCDCDC">
<tr align="center" bgcolor="7FFFD4">
<td><u>Gambar .GIF :</u></td>
<td><u>Gambar .JPG :</u></td>
<td><u>Gambar .PNG :</u></td>
</tr>
<tr>

22
<td><img src="test_image_Gif.gif" alt="Gambar Avril" width="200" height="260" /></td>
<td><img src="test_image_JPG.jpg" alt="Gambar Avril" width="260" height="260" /></td>
<td><img src="test_image_PNG.png" alt="Gambar Avril" width="260" height="260" /></td>
</tr>
</table>
</center>
</body>
</html>

3.4 Form Pada HTML

Sebuah form dalam HTML harus berada di dalam tag form, yang diawali dengan
<form> dan diakhiri dengan </form>. Tag form akan membutuhkan beberapa atribut untuk
dapat berfungsi dengan seharusnya.
Atribut pertama adalah action, yang berfungsi untuk menjelaskan kemana data form
akan dikirimkan. Biasanya nilai dari atribut action ini adalah alamat dari sebuah halaman
PHP yang digunakan untuk memproses isi data form.
Atribut kedua adalah method, yang berfungsi untuk menjelaskan bagaimana data isian
form akan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post.
Perbedaan method get dan method post adalah, jika kita mengisi atribut method
dengan get (dimana ini adalah nilai default seandainya atribut method tidak ditulis) maka
isian form akan terlihat pada url browser. Method get ini biasanya digunakan untuk query
pencarian. Method post biasanya digunakan untuk data yang lebih sensitif seperti yang berisi
password, atau registrasi user. Data hasil form tidak akan terlihat pada browser.

Struktur dasar form akan terlihat sebagai berikut :

<form action="prosesdata.php" method="post">
...isi form...
</form>

3.4.1 Tag Input

Tag input merupakan tag paling banyak digunakan di dalam form dan memiliki
banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai dengan
tombol submit, semuanya dalam bentuk tag <input>. Bentuk-bentuk dari keluarga tag input
ini dibedakan berdasarkan atribut type:
1. <input type=”text” /> atau bisa juga <input /> adalah textbox inputan biasa yang
menerima input berupa text, contohnya digunakan untuk inputan nama, username, dan

23
 inputan yang berupa text pendek. Input type text ini juga bisa memiliki atribut value
yang bisa diisi nilai tampilan awal dari text.
2. <input type=”password” /> dalam tampilannya sama dengan type text, namun teks yang
diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan
untuk inputan yang sensitif seperti password.
3. <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di
centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox
memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat
chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan
checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.
4. <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu
diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa
memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
5. <input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya
diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text
tombol submit berubah sesuai inputan nilai value.

Perhatikan juga bahwa seperti tag <img> dan <br>, tag <input> juga merupakan tag
yang berdiri sendiri dan tidak membutuhkan penutup tag.

3.4.2 Tag Textarea

Tag textarea pada dasarnya sama dengan input type text, namun lebih besar dan
dapat berisi banyak baris. Panjang dan banyak baris untuk text area di atur melalui atribut
rows dan cols, atau melalui CSS.
Contoh penggunaan textarea adalah sebagai berikut:

<textarea rows="5" cols="20">

Text yang diisi dapat mencapai banyak baris
</textarea>

Elemen yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.

3.4.3 Tag Select

24
 Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat
memilih dari nilai yang ada. Tag select digunakan bersama-sama dengan tag option untuk
membuat box pilihan.

Contoh penggunaan tag select adalah sebagai berikut:

<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga">Pilihan 3</option>
</select>

Ketika form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan. Nilai ini
adalah berupa text diantara tag option, kecuali jika kita memberikan atribut value. Jika atribut
value berisi nilai, maka nilai value-lah yang akan dikirim. Ada atau tidaknya atribut value ini
tidak akan tampak dalam tampilan form.
Tag select memiliki atribut selected yang dapat ditambahkan agar tag select berisi
nilai awal. Contoh penggunaanya adalah sebagai berikut:

<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga" selected>Pilihan 3</option>
</select>

3.4.4 Mengenal Atribut Name

Setiap tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses oleh
web server nantinya. Di dalam halaman proses (yang biasanya berupa bahasa PHP atau ASP), nilai
dari atribut name inilah yang akan menjadi variabel form. Contoh pemakaiannya adalah sebagai
berikut:

<input type="text" name="username">

<input type="text" name="email">

Kedua input diatas akan tampak sama persis, namun pada saat pemrosesan data, masing-
masing akan dibedakan menurut atribut name.

Contoh Program :
<html>
<head>
<title>Praktikum IMK</title>

25
</head>
<body>
<h2>Isi Biodata :</h2>
<form action=" formulir.html" method="get">
<table border="0" bgcolor="#33FFCC">
<tr>
<td>Nama</td>
<td><input type="text" name="nama" value="" size="50"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" value="" size="50"/></td>
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>
<input type="radio" name="jenis_kelamin" value="laki-laki" checked/>Laki - Laki<br>
<input type="radio" name="jenis_kelamin" value="perempuan" checked/>Perempuan
</td>
</tr>
<tr>
<td>Hobi</td>
<td>
<input type="checkbox" name="hobi_baca" /> Membaca Buku
<input type="checkbox" name="hobi_nulis" checked /> Menulis
<input type="checkbox" name="hobi_mancing" /> Memancing
</td>
</tr>

<tr>
<td>Asal Kota</td>
<td>
<select name="asal_kota" >
<option value="Kota Jakarta"> Jakarta</option>
<option>Bandung</option>
<option value="Kota Semarang" selected>Semarang</option>
</select>
</td>
</tr>
<tr>
<td>Komentar Anda</td>
<td><textarea name="komentar" rows="5" cols="50"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Save Data"/></td>
</tr>
</table>
</form>
</body>
</html>

3.5 Tugas Akhir Modul 3

Kerjakanlah tugas berikut ini !

26
1. Buatlah sebuah form registrasi seperti dibawah ini !

2. Buatlah sebuah tampilan html sesuai dengan yang kalian ingin desain, didalamya terdapat
form, paragraph, image, table, number/order list, hyperlink, dan font !

27
 MODUL 4 : CSS (CASCADING STYLE SHEET)

4.1 Pengenalan CSS

Cascading Style Sheet (CSS) adalah salah satu bahasa pemrograman web yang
digunakan untuk mempercantik halaman web dan mengendalikan beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur dan seragam. CSS dapat kita gunakan dalam
mengendalikan ukuran gambar, warna teks, warna tabel, ukuran border, warna border, warna
hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas,
bawah, dan parameter lainnya. CSS bisa juga diartikan sebagai bahasa style sheet yang
digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita
untuk menampilkan halaman yang sama dengan format yang berbeda.

Adapun beberapa kelebihan CSS adalah sebagai berikut:

1. Memisahkan desain dengan konten halaman web.

2. Mengatur desain sefisien mungkin.
3. Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja.
4. Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
5. Lebih mudah didownload karena lebih ringan ukuran filenya.
6. Satu CSS dapat digunakan banyak halaman web.

4.2 Struktur Penulisan CSS

Berikut ini adalah struktur penulisan CSS :

Selector { Properties : Value; }

 Selector adalah HTML element yang ingin dibuat style nya.

 Declaration merupakan isi dari property dan nilai dari CSS.
 Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property
digunakan titik koma ( ; )

28
4.3 Jenis-jenis Selector CSS
CSS memiliki 3 jenis selector basic yaitu class selector, id selector, dan tag selector.

1. Selector Id
Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik . Id
pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“.
Contoh :
Penulisan code dalam dokumen HTML
<div id=”footer”>
copy-Right Cyber Bussiner School – 2011
</div>
Penulisan code dalam dokumen CSS
#footer {
color: blue;
border: 1px solid black;
}
2. Selector Class
Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda
dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen.
Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class
yang sama. Selector Class menggunakan atribut class HTML, dan didefinisikan dengan
“.”
Contoh :
Penulisan code dalam dokumen HTML
<h3 class=’judul’>
Belajar Membuat Website
</h3>
Penulisan code dalam dokumen CSS
.judul{
font : 12px;
font-style: italic;
}
3. Selector Tag
Nama dari element HTML digunakan sebagai selector untuk mendefinisikan tag HTML
yang berasosiasi. Misalnya, selector dari <h1> adalah h1. HTML selector digunakan
dalam CSS rule untuk mendefinisikan bagaimana suatu tag akan ditampilkan.
29
 Contoh :
Penulisan code dalam dokumen HTML
<h1> Mengarungi Samudra PHP </h1>
<h1> Belajar HTML dan CSS </h1>
Penulisan code dalam dokumen CSS
h1{
font: 12px;
color:red;
font-weight: bold;
}

4.4 Cara Penggunaan CSS

Ada 3 cara penggunaan css yaitu inline css, embedded css, external css.
1. Inline CSS
Inline css merupakan cara penggunaan css dengan menambahkan langsung di
tag dokumen htmlnya sebagai atribut.

Contoh :
<p style="color:blue">
Membuat tulisan warna biru
</p>
<p style="font-style:italic;">
Membuat tulisan miring
</p>

Penulisan CSS dengan cara inline ini di mulai dengan kata style lalu di ikuti
dengan syntax property: value.

2. Embedded CSS
Embedded CSS merupakan cara penggunaan css yang disisipkan di dalam tag
<style> ...</style>. Tag style tersebut disimpan diantara tag <head>...</head>
Contoh :
<html>
<head>
<style>

30
 p{
color:green;
font-family:arial;
font-size:120%;
}
</style>
</head>
<body>
<p>Belajar Css Mudah</p>
<p>Test CSS Test CSS Test CSS Test CSS</p>
Terima Kasih Telah Belajar CSS...
</body>
</html>

3. Eksternal CSS
Cara ini menggunakan file Css yang dituliskan secara terpisah dengan dokumen html.
Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk
semua halaman web anda. Ada dua langkah yang harus dikerjakan untuk menggunakan
css dengan cara ini :
 Anda membuat satu file dengan notepad atau teks editor lain, dan berinama,
misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
Contoh :
p{
font-family: arial;
font-size: small;
}
h1{
color: red;
}

 Langkah kedua adalah memanggi file style.cssdari semua halaman web.

Caranya dengan memasukkan kode di bawah ini yang disisipkan di antara tag < head >
dan < / head >
Contoh :
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”></link>
</head>

31
4.5 Bekerja Dengan CSS
4.5.1 CSS Font Style dan Text Style

Contoh :

<html>
<head>
<style>
body {
font-family: Myriad Pro;
}
h3 {
color: #43bfc7;
font-size: 40px;
text-align: center;
font-style: italic;
}
#quote {
text-align: center;
font-size: 50px;
font-weight: bold;
color: grey;
}
.name {
text-align: center;
font-size: 30px;
font-style: italic;
}
</style>
</head>
<body>
<br>
<h3>#QuoteOfTheDay</h3>
<div id="quote">"The science of today is the technology of tomorrow"</div>
<div class="name">- Edward Teller -</div>
</body>
</html>

4.5.2 CSS Link, Border, Margin, Pading dan Background Style

Contoh :
Prog_1.html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<center><img src="andro.png" width="100px" height="100px"></center><br>
<div id="header">Login Sikad FT-UMJ</div><br>
<div>
<form>
<fieldset>
<label>Username:</label>
<input type="text">
<label>Password:</label>
<input type="text">

32
 <label>Level:</label>
<select>
<option>Admin</option>
<option>Dosen</option>
<option>Pegawai</option>
<option>Mahasiswa</option>
</select>
<button name="save" value="Login">Login</button>
<p><a href="#" target="_blank">Lupa Password</a></p>
</fieldset>
</form>
</div>
</body>
</html>

style.css
body {
font-family: Myriad Pro;
background-color: #fff;
}

fieldset {
padding: 25px 25px 25px 25px;
border-radius: 10px;
height: 260px;
width: 300px;
margin:auto;
border: none;
background-color: #eaeaea;
}

#header {
color: #43bfc7;
font-size: 30px;
text-align: center;
}

input, select {
width: 100%;
padding: 0px 0px 0px 5px;
border: 1px solid #C5E2FF;
border-radius: 5px;
background: #FBFBFB;
height: 30px;
margin: 2px 6px 16px 0px;
}

button {

padding: 10px 30px 10px 30px;

background: #66C1E4;
border: none;
color: #FFF;
}

a:link {
text-decoration: none;
font-size: 13px;
color: #66C1E4;
}
33
 a:hover {
text-decoration: underline;
}

4.6 Tugas Akhir Modul 4

1. Buatlah desain tampilan login gmail dengan html dan css !

2. Buatlah desain tampilan web sederhana menggunakan html dan css !

34
 MODUL 5 FRAMEWORK CSS (BOOTSTRAP)

5.1 Apa Itu Framework ?

Framework adalah kerangka kerja yang digunakan untuk mengembangkan aplikasi berbasis
desktop atau aplikasi berbasis website. Dengan menggunakan framework Anda akan lebih mudah
untuk membuat aplikasi atau website. Itu karena Anda hanya perlu menyusun komponen-komponen
pemrograman yang sudah jadi. Dengan kata lain, Anda tidak perlu membuat berbagai fitur dari awal
lagi.

Framework sengaja diciptakan untuk membantu developer mengembangkan aplikasi atau

website lebih cepat serta tersusun dan terstruktur. Dengan begitu, developer dan programmer tidak
perlu melakukan koding program yang diulang-ulang.

5.2 Bootstrap
Bootstrap adalah framework open-source khusus front end yang awalnya dibuat oleh Mark
Otto dan Jacob Thornton untuk mempermudah dan mempercepat pengembangan web di front end.
Bootstrap memiliki semua jenis HTML dan template desain berbasis CSS untuk berbagai fungsi dan
komponen, seperti navigasi, sistem grid, carousel gambar, dan tombol (button).

Namun, fungsi utama dari Bootstrap adalah untuk membuat situs yang responsif. Interface
website akan bekerja secara optimal di semua ukuran layar baik di layar smartphone maupun layar
komputer/laptop. Developer tak perlu lagi mendesain situs khusus untuk perangkat tertentu. Trafik
dan jangkauan audiens versi desktop tidak akan hilang dan tetap diarahkan ke website versi mobile.

User dan komunitas Bootstrap semakin berkembang. Developer dan designer website bisa
bertukar informasi dan juga berdikusi mengenai patch framework terbaru.

5.3 Komponen Utama Bootstrap

5.3.1 Bootstrap.css

Bootstrap.css adalah framework yang mengatur dan mengelola layout website. HTML
mengatur konten dan struktur halaman web, sedangkan CSS berurusan dengan layout situs. Oleh
karena itu, kedua struktur ini harus bekerja bersama-sama untuk melakukan tindakan tertentu.

Jika menggunakan CSS, yang perlu dilakukan adalah merujuk atau mengarahkan halaman
web ke file CSS. Nantinya semua perubahan dapat dilakukan di satu file saja. Fungsi CSS tidak
terbatas hanya di gaya teks saja, tetapi juga dapat digunakan untuk membuat aspek lainnya di
halaman web, seperti tampilan tabel dan gambar.

35
 Sayangnya, CSS punya banyak declaration dan selector. Jadi, Anda butuh waktu untuk
mengingat keduanya.

5.3.2 Bootstrap.js

File ini merupakan bagian inti dari Bootstrap. Di dalamnya terdapat file JavaScript yang
bertanggung jawab atas interaktivitas website.

Developer menggunakan jQuery untuk menghemat waktu karena tidak perlu menulis
sintaks JavaScript berulang kali. jQuery sendiri adalah open source yang populer dan juga library
JavaScript lintas platform yang memperbolehkan usernya untuk menambah berbagai
fungsionalitas ke website.

Berikut contoh fungsi dan kegunaan jQuery:

 Menjalankan permintaan Ajax, seperti mengurangi (subtract) data dari lokasi lain
secara dinamis.
 Membuat widget menggunakan koleksi plugin JavaScript.
 Membuat animasi menggunakan CSS property.
 Membuat konten website terlihat lebih dinamis.

Walaupun Bootstrap dengan CSS property dan elemen HTML-nya bisa berfungsi normal,
tetap saja framework ini mebutuhkan jQuery untuk membuat desain yang responsif. Jika tidak,
Anda hanya bisa menikmati CSS yang statis dan datar.

5.4 Cara Install Bootstrap

5.4.1 Instalasi secara Offline

Untuk menginstall boot strap secara offline, langkah pertama yang perlu anda
lakukan adalah mendownload file bootsrap melalui website 
https://getbootstrap.com

36
 Selanjutnya, pilih tombol download seperti gambar di atas

Kemudian, pilih tombol download untuk mendownload file bootstrap. Nah, setelah
mendownload file tersebut dalam bentuk zip. Ekstrak file tersebut dalam folder baru.
Nantinya, kalian akan menemukan seperti ini.

37
 Kemudian, langkah terakhir adalah kita perlu membuat file .html. Buka text editor
kalian, kemudian paste kode dibawah ini.

<!Doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-

scale=1">

<title>Belajar Bootstrap</title>

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<script src="bootstrap/js/jquery-3.2.1.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<h1> Instal Bootstrap Berhasil</h1>

</html>

Nah, jangan lupa file tersebut disimpan dalam bentuk html yaa. Jadi nantinya, di
folder boot strap minimal ada 2 folder dan 1 file yaitu file css, js dan file html

38
 5.4.2 Instalasi secara Online

Nah, jika install bootstrap secara offline kita perlu mendownload terlebih dahulu. Kalau,
secara online kita tidak perlu mendownloadnya. Cukup hanya dengan menuliskan alamat server
yang menyimpan library boot strap. Namun, disini anda harus selalu terkoneksi dengan internet
(online). 

5.5 Tugas Akhir Modul 4

39
 MODUL 6 : PHP dan MySQL

6.1 BAHASA PEMROGRAMAN BERBASIS WEB

Bahasa pemograman berbasis web pada dasarnya terbagi atas dua bagian :
a. Client-Based Language
Client-Based Language adalah bahasa pemograman yang script programnya diolah disisi
client.
Contoh : HTML, CSS, JAVASCRIPT dan XML.
b. Server-Based Language
Server-Based Language adalah bahasa pemograman yang script programnya di server
dan dari source tersebut dikirim ke client untuk selanjutnya diolah lagi di web browser.
Contoh : ASP, PHP, JSP, PERL, RUBY.

6.2 PENGENALAN PHP

PHP adalah sebuah bahasa scripting server-side yang dirancang untuk membangun
website atau aplikasi berbasis web. Sejak dikembangnya pada awal tahun 1994-an oleh
Rasmus Lerdorf PHP banyak digunakan oleh para developer untuk membangun berbagai
aplikasi dikarenakan PHP mempunyai berbagai kelebihan diantanya :
a. PHP adalah bahasa pemograma Open Source dibawah naungan lisensi GPL, sehingga
dapat digunakan untuk keperluan komersial ataupun non-komersial secara free.
b. PHP dapat berjalan disemua sistem operasi.
c. Content Type modification, feature ini dapat menghasilkan bukan hanya file hypertext
saja, tetapi juga bisa menghasilkan gambar, file PDF dsb.

6.3 MEMULAI PHP

Sebelum memulai PHP diperlukan sebuah web server untuk menjalankan script PHP dan
dapat menampilkan hasilnya pada browser. Web server yang bisa digunakan salah satunya adalah
apache.

Ada beberapa paket program yang telah menyertakan apache web server dan PHP yang telah
terinstall, sehingga tidak diperlukan konfigurasi lagi, antara lain :
a. XAMPP Installer (https://www.apachefriends.org/index.html)
b. WAMP Server (http://www.wampserver.com/en/)

40
 Untuk memulai sebuah perogram PHP harus diawali dengan tag pembuka ( <?php ) dan di
akhiri dengan tag penutup ( ?> ), dan script yang akan kita buat diketikkan diantara kedua tag
tersebut.

<?php

echo “Halo Dunia, ini perogram Pertama Saya”;

?>
Contoh : Program PHP

<html>

<head>

<title>Pengenalan PHP</title>

</head>

<body>

<?php

echo “Halo Dunia, ini perogram Pertama Saya”;

?>

</body>

</html>
Contoh : Program PHP dalam HTML

Apabila script diatas dijalankan pada browser maka akan menghasilkan tampilan sebagai
berikut :

Gambar Tampilan hasil Program

6.4 VARIABLE

Pembuatan variabel dalam PHP harus diawali dengan tanda $ (dollar) dan diikuti
dengan nama variabelnya. Nama variabel harus diawali dengan karakter atau underscore.
Variabel dalam PHP juga bersifat case sensitive sehingga huruf kapital dengan huruf biasa
mempunyai arti yang berbeda.

41
 <?php

$name = “Rasmus Lerdorf”;

$tahun = 1994;

$bahasa = “PHP”;

echo $name;

echo “ penemu ”.$bahasa;

echo “ pada tahun ”.$tahun;

?>
Contoh Membuat Variabel

6.5 INCLUDE dan REQUIRE

Include() adalah sebuah statement untuk menyertakan atau menyatukan dan

mengevaluasi file yang telah disertakan. Jika terdapat error pada program yang disertakan,
maka error akan ditampilkan di layar. Dan jika file yang disertakan ternyata tidak ditemukan
(mungkin karena lokasi yang salah atau memang file tidak ada), maka program selanjutnya
(setelah include) akan tetap dijalankan walaupun ditampilkan error.

<?php

echo "File koneksi";

echo "<br>";

?>

<?php

include "koneksi.php";

echo "Halo ini contoh program Include";

?>

Perintah require() pada dasarnya sama dengan perintah include(). Perbedaannya

hanya terletak pada saat file yang disertakan tidak ditemukan, maka perintah-perintah
selanjutnya tidak akan dijalankan.

42
 <?php

echo "File koneksi";

echo "<br>";

?>

Contoh File koneksi

<?php

require "koneksi.php";

echo "Halo ini contoh program Include";

?>
Contoh Program require

6.6 POST dan GET

HTTP menetapkan sembilan metode yang menunjukkan tindakan yang ingin

dilakukan terhadapsumber teridentifikasi. Hal yang diwakili sumber ini, berupa data yang
sudah ada atau data yang diciptakan secara dinamis, bergantung pada implementasi pada
server. Biasanya sumber ini berkaitan dengan file atau output fileyang dieksekusi didalam
server.
Sembilan method tersebut diantaranya : HEAD, GET, POST, PUT, DELETE,
TRACE, OPTION, CONNECT, PATCH.
Tetapi pada modul ini kita hanya akan membahas dua method yaitu GET dan POST.
a. GET
Digunakan untuk mempresentasikan atau untuk mengakses sumber tertentu. GET method
tidak disarankan digunakan sebagai pengirim data untuk diproses. Dan untuk membuat
varibel GET sudah diatur secara default yaitu : $_GET.
Contoh penggunaan method GET.

43
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<center>HALAMAN LOGIN</center>
<br>
<table width="400px" align="center">

<form action="proses_login.php" method="GET">

<tr>
<td>Username</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="LOGIN"
value="LOGIN">
</td>
</tr>
</form>
</table>
</body>
</html>

Contoh Form menggunakan method GET

<?php

echo $_GET['username'];

echo $_GET['password'];

?>
Contoh Mencetak data dari method GET

Contoh Hasil dari proses GET

44
 Dari hasil penggunaan method GET diatas didapatkan hasil dengan parameter yang
menampilkan data yang dikirim melalui form, ini tentunya tidak baik apabila kita akan
mengirimkan data yang bersifat rahasia.

b. POST
Berfungsi Mengirimkan data untuk diproses (misalkan dari sebuah from HTML)
kesebuah file yang menangani pemprosesan data. Misalkan sebuah proses untuk
memasukkan data kedalam database.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<center>HALAMAN LOGIN</center>
<br>
<table width="400px" align="center">

<form action="proses_login.php" method="POST">

<tr>
<td>Username</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="LOGIN"
value="LOGIN">
</td>
</tr>

</form>

</table>

</body>
</html>
Contoh Form menggunakan methode POST

45
 <?php

echo $_POST['username'];

echo $_POST['password'];

?>
Contoh mencetak data dari methode POST

Contoh Hasil dari proses POST

Dari hasil yang kita lihat maka pada bagian url nya tidak tampak data yang dikirim
oleh form.

6.7 PHP dan MySQL

Seperti yang kita ketahui bahwa setiap aplikasi mempunyai sebuah database sebagai
penyimpanan datanya.Database yang kita gunakan tentunya tidak akan langsung terkoneksi
secara otomatis tanpa kita melakukan configurasi antara keduanya.
Untuk membuat koneksi dengan database terlebih dahulu kita harus membuat
databasenya, asumsikan saja kita sudah mempunyai database dengan nama “praktikum”.

<?php

$host = "localhost";

$user = "root";

$password = "";

$database = "praktikum";

$con = mysqli_connect($host, $user, $password, $database);

?>

Keterangan :

Localhost / default nama host web server, atau juga bisa memakai default IP
127.0.0.1 nya ( 127.0.0.1)
root Defaul user web server
Password Untuk password dari user root dalam contoh kasus ini
dikosongkan karena secara default user root tidak mempunyai
password.
Praktikum Nama database yang akan kita koneksikan

46
 6.7.1 MENAMPILKAN DATA DARI DATABASE

Untuk menampilkan data dari database kita harus mempunyai sebuah table dan
harus terkoneksi dulu dengan databasenya.

Diatas kita sudah membuat koneksi dengan database dan sudah mempelajari
stuktur control include() dan require(), sekarang kita gunakan keduanya.

<?php

include "koneksi.php";

$sql = "SELECT * FROM mahasiswa";

$query = mysqli_query($con, $sql);

while ($result = mysqli_fetch_array($query)) {

echo $result['id']." | ".$result['nama'];

?>
Contoh Program menampilkan data dari DB

47
 BAB 7 : FRAMEWORK PHP : LARAVEL

7.1 Framework PHP : Laravel

Sebuah Framework PHP yang paling popular saat ini, laravel memudahkan
pengguna karena tersedia nya fitur siap pakai, mengikuti best practice, dan mudah
membaca kode program

7.2 Model-View-Control (MVC) dan Routing

Model-View-Controller (MVC) adalah sebuah arsitektur
perancangan kode program. Tujuannya untuk memcah kode
program utama menjadi 3 komponen terpisah dengan tugas
yang spesifik. Ketiga komponen tersebut adalah :

- Pengaksesan database, disebut sebagai Model

- Tampilan design (user interface), disebut sebagai View

- Alur logika program, disebut sebagai Controller

Routing adalah menyembunyikan serta mempercantik nama file controller :

48
7.3 Cara Install Laravel
Buka Xampp, Hidupkan Mysql

49
Langkah Pertama, Buat Database pada MYSQL ‘pbw_praktikum’

Localhost/phpmyadmin

Untuk menggunakan laravel pada windows, install composer terlebih dahulu

50
Cek Versi PHP

Instalasi laravel 7

Buka directory c:\xampp\htdocs

composer create-project –prefer-dist laravel/laravel=”^7.0” praktikum_pbw

51
Buka project laravel, Buka CMD , masuk ke directory project yang telah dibuat sebelumnya.

Php artisan serve

Open browser, Masukan alamat 127.0.0.1 : 8000

52
 7.4 Membuat Web Sederhana dengan Laravel
Open Sublime , dan open folder praktikum_pbw01

Buka file .env

Ubah nama database

Script .env
APP_NAME=Laravel APP_ENV=local
APP_KEY=base64:Yy5FCBVLRj10mnrz6rBCs1PD8+fitXU8qjqMHZRaiBY= APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=pbw_praktikum
DB_USERNAME=root DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file 53
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
54
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" MIX_PUSHER_APP_CLUSTER="$
{PUSHER_APP_CLUSTER}"

Buka CMD , Untuk membuat model , controller dan migrate Stop php

artisan dengan (CTRL + C)

Open line : php artisan make:model Mahasiswa –migration –controller

55
Model Mahasiswa sudah tersedia

app/Mahasiswa.php

Migration mahasiswa table

Database/migrations/ temp_create_mahasiswas_table

56
Mahasiswa Controller

App/http/controller/MahasiswaController

Untuk membuat tabel, dapat menggunakan cara :

Buka file migrate mahasiswa , (database/migrations/temp_create_mahasiswa_table.php) Beri tambahan

field untuk tabel mahasiswas

57
Temp-date_create_mahasiswa_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateMahasiswasTable extends Migration

{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('mahasiswas', function (Blueprint $table) {
$table->id();
$table->char('nim',8)->unique();
$table->string('nama');
$table->char('jenis_kelamin',1);
$table->string('jurusan');
$table->text('alamat')->nullable();
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('mahasiswas');
}
}

58
Setelah update buka cmd baru

Jalankan php artisan migrate

Cek database pbw_praktikum pada mysql,

Jika sesuai , tabel mahasiswas akan tersedia

59
Letakkan folder CSS dan JS yang terdapat master bootstrap, bootstap dapat di unduh pada link

http://bit.ly/laravelAsset

Pada folder public

60
Tampilan View Index

Buka file web.php

Routes/web.php

Web.php

<?php

use Illuminate\Support\Facades\Route;

/*
|
| 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 something great!
|
*/

Route::get('/', function () {
return view('welcome');
});

Route::get('/mahasiswas', 'MahasiswaController@index')->name('mahasiswa.index');

61
Kemudian Buka MahasiswaController.php

App/http/controllers/MahasiswaController.php

MahasiswaController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Mahasiswa;

class MahasiswaController extends Controller

{
//

public function index(){

$mahasiswas = Mahasiswa::all();
return view('mahasiswa.index',['mahasiswas' => $mahasiswas]);
}

62
Buka model mahasiswa.php

App/mahasiswa.php

Mahasiswa.app

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Mahasiswa extends Model

{
protected $guarded = [];
}

63
Buat view index pada folder mahasiswa

Index.blade.php (resources/views/mahasiswa/index.blade.php)

64
Index.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<title>Data Mahasiswa</title>
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col-12">
<div class="py-4 d-flex justify-content-end align-items-center">
<h2 class="mr-auto">Tabel Mahasiswa</h2>
</div>

<table class="table table-striped">

<thead>
<tr>
<th>#</th>
<th>Nim</th>
<th>Nama</th>

65
 <th>Jenis Kelamin</th>
<th>Jurusan</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
@forelse ($mahasiswas as $mahasiswa)
<tr>
<th>{{$loop->iteration}}</th>
<td>{{$mahasiswa->nim}}</td>
<td>{{$mahasiswa->nama}}</td>
<td>{{$mahasiswa-
>jenis_kelamin == 'P' ? 'Perempuan' : 'Laki-laki'}}</td>
<td>{{$mahasiswa->jurusan}}</td>
<td>{{$mahasiswa->alamat == '' ? 'N/A' : $mahasiswa-
>alamat}}</td>
</tr>
@empty
<td colspan="6" class="text-center">Tidak ada data</td>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

66
Tampilan index mahasiswa

67
 BAB 8 : CRUD (CREATE-READ-UPDATE-DELETE)
PADA LARAVEL

8.1 Create-Read
Create Mahasiswa

Buka route

Routes/web.php

68
Web.php

<?php

use Illuminate\Support\Facades\Route;

/*
|
| Web Routes
|
|
| Here is where you can register web routes
69 for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Buka MahasiswaController

App/http/controllers/MahasiswaController.php

MahasiswaController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Mahasiswa;

class MahasiswaController extends Controller

{

public function index(){

// return "Table Mahasiswa di Sini";

70
 $mahasiswas = Mahasiswa::all();
return view('mahasiswa.index',['mahasiswas' => $mahasiswas]);
}

public function create(){

return view('form-pendaftaran');
}

public function store(Request $request){

$validateData = $request->validate([
'nim' => 'required|size:8',
'nama' => 'required|min:3|max:50',
'jenis_kelamin' => 'required|in:P,L',
'jurusan' => 'required',
'alamat' => '',
]);

Mahasiswa::create($validateData);

return redirect('mahasiswas');
}

71
 Tambahkan view form-pendaftaran.php

resources/views/form-pendaftaran.blade.php

form-pendaftaran.php

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
72
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<title>Pendaftaran Mahasiswa</title>
</head>
 @error('nim')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>

<div class="form-group">
<label for="nama">Nama Lengkap</label>
<input type="text" class="form-control @error('nama') is-
invalid @enderror" id="nama" name="nama" value="{{ old('nama') }} ">
@error('nama')
<div class="text-danger">{{ $message }} </div>
@enderror
</div>

<div class="form-group">
<label>Jenis Kelamin</label>
<div>
<div class="form-check form-check-inline">
<input class="form-check-
input" type="radio" name="jenis_kelamin" id="laki_laki" value="L" {{ old ('jenis_ke
lamin')=='L' ? 'checked' : '' }}>
<label class="form-check-
label" for="laki_laki">Laki-laki</label>
</div>

<div class="form-check form-check-inline">

<input class="form-check-
input" type="radio" name="jenis_kelamin" id="perempuan" value="P" {{ old ('jenis_ke
lamin')=='P' ? 'checked' : '' }}>
<label class="form-check-
label" for="perempuan">Perempuan</label>
</div>

@error('jenis_kelamin')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>
</div>

<div class="form-group">
<label for="jurusan">Jurusan</label>
<select class="form-control" name="jurusan" id="jurusan">

<option value="Teknik Informatika" {{ old('jurusan')=='

Teknik Informatika' ? 'selected' : '' }}>Teknik Informatika</option>

<option value="Sistem Informasi" {{ old('jurusan')=='Si

73
stem Informasi' ? 'selected' : '' }}>Sistem Informasi</option>

74
 <option value="Ilmu Komputer" {{ old('jurusan')=='Ilmu
Komputer' ? 'selected' : '' }}>Ilmu Komputer</option>

<option value="Teknik Komputer" {{ old('jurusan')=='Tek

nik Komputer' ? 'selected' : '' }}>Teknik Komputer</option>

<option value="Teknik Telekomunikasi" {{ old('jurusan')

=='Teknik Telekomunikasi' ? 'selected' : '' }}>Teknik Telekomunikasi</option>

</select>

@error('jurusan')
<div class="text-danger">{{ $message }}</div>
@enderror
</div>

<div class="form-group">
<label for="alamat">Alamat</label>
<textarea class="form-
control" id="alamat" rows="3" name="alamat">{{ old('alamat') }} </textarea>
</div>

<button type="submit" class="btn btn-primary mb-

2">Daftar</button>

</form>

</div>
</div>
</div>

</body>
</html>

75
Tampilan Form-pendaftaran.

Berikan Inputan

Setelah diinputkan , hasil index akan seperti ini

76
8.2 Update-Delete

Tambahkan di index.blade.php

Resources/views/mahasiswa/index.blade.php

<h2 class="mr-auto">Tabel Mahasiswa</h2>

<a href="{{ route('mahasiswas.create') }}" class="btn btn-primary">
Tambah Mahasiswa
</a>
</div>

dan

<th>{{$loop->iteration}}</th>
<td><a href="{{ route('mahasiswas.show',['mahasiswa' =>
$mahasiswa->id]) }}">{{$mahasiswa->nim}}</a></td>

77
Tambahkan script di Route (web.php)

Routes/web.php

Route::get('/mahasiswas/{mahasiswa}', 'MahasiswaController@show')
->name('mahasiswas.show');

Tambahkan script di Mahasiswa Controller (MahasiswaController.php)

App/http/controllers/MahasiswaController.php

public function show(Mahasiswa $mahasiswa)

{
return view('mahasiswa.show',['mahasiswa' => $mahasiswa]);
}

Buat file baru di views/mahasiswa (show.blade.php)

Resources/views/mahasiswa/show.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<title>Biodata {{$mahasiswa->nama}}</title>
</head>
<body>

<div class="container mt-3">

<div class="row">
<div class="col-12">

<div class="pt-3 d-flex justify-content-end align-items-center">

<h1 class="h2 mr-auto">Biodata {{$mahasiswa->nama}}</h1>
{{-- <a href="{{ route('mahasiswas.edit',['mahasiswa' => $mahasiswa-
>id]) }}" --}}
{{-- class="btn btn-primary">Edit</a> --}}
</div>

<hr>
78
 {{-- class="btn btn-primary">Edit</a> --}}
{{-- </div>

<hr> --}}

@if(session()->has('pesan'))
<div class="alert alert-success" role="alert">
{{ session()->get('pesan')}}
</div>
@endif

<ul>
<li>NIM: {{$mahasiswa->nim}} </li>
<li>Nama: {{$mahasiswa->nama}} </li>
<li>Jenis Kelamin:
{{$mahasiswa->jenis_kelamin == 'P' ? 'Perempuan' : 'Laki-laki'}}
</li>
<li>Jurusan: {{$mahasiswa->jurusan}} </li>
<li>Alamat:
{{$mahasiswa->alamat == '' ? 'N/A' : $mahasiswa->alamat}}
</li>
</ul>

</div>
</div>
</div>

</body>
</html>

79
UPDATE :

Tambahkan script di Route (web.php)

Routes/web.php

Route::get('/mahasiswas/{mahasiswa}/edit', 'MahasiswaController@edit')
->name('mahasiswas.edit');

Route::patch('/mahasiswas/{mahasiswa}', 'MahasiswaController@update')
->name('mahasiswas.update');

Tambahkan script di Mahasiswa Controller (MahasiswaController.php)

App/http/controllers/MahasiswaController.php

public function edit(Mahasiswa $mahasiswa)

{
return view('mahasiswa.edit',['mahasiswa' => $mahasiswa]);
}

public function update(Request $request, Mahasiswa $mahasiswa)

{
$validateData = $request->validate([
'nim' => 'required|size:8|unique:mahasiswas,nim,'.$mahasiswa->id,
'nama' => 'required|min:3|max:50',
'jenis_kelamin' => 'required|in:P,L',
'jurusan' => 'required',
'alamat' => '',
]);

$mahasiswa->update($validateData);

return redirect()->route('mahasiswas.show',['mahasiswa'=>$mahasiswa->id])
->with('pesan',"Update data {$validateData['nama']} berhasil");
}

80
Buat file baru di views/mahasiswa (edit.blade.php)

Resources/views/mahasiswa/edit.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<title>Edit Mahasiswa</title>
</head>
<body>

<div class="container pt-4 bg-white">

<div class="row">
<div class="col-md-8 col-xl-6">
<h1>Edit Mahasiswa</h1>
<hr>

<form action="{{ route('mahasiswas.update',['mahasiswa' =>

$mahasiswa
->id]) }}" method="POST">
@method('PATCH')
@csrf
<div class="form-group">
<label for="nim">NIM</label>
<input type="text"
class="form-control @error('nim') is-invalid @enderror"
id="nim" name="nim" value="{{ old('nim') ?? $mahasiswa->nim
}}"> @error('nim')
<div class="text-danger">{{ $message
}}</div> @enderror
</div>

<div class="form-group">
<label for="nama">Nama Lengkap</label>
<input type="text"
class="form-control @error('nama') is-invalid @enderror"
id="nama" name="nama" value="{{ old('nama') ?? $mahasiswa-
>nama }}">
@error('nama')
<div class="text-danger">{{ $message }}</div>
81
 @enderror
</div>
</div>

<div class="form-group">
<label>Jenis Kelamin</label>
<div>
<div class="form-check form-check-inline">
<input class="form-
check- input" type="radio"
name="jenis_kelamin"
id="laki_laki" value="L"
{{ (old('jenis_kelamin') ?? $mahasiswa->jenis_kelamin)
== 'L' ? 'checked': '' }} >
<label class="form-check-label" for="laki_laki">Laki-
laki</label>
</div>
<div class="form-check form-check-inline">
<input class="form-
check- input" type="radio"
name="jenis_kelamin"
id="perempuan" value="P"
{{ (old('jenis_kelamin') ?? $mahasiswa->jenis_kelamin)
== 'P' ? 'checked': '' }} >
<label class="form-
check- label"
for="perempuan">Perempuan</label>
</div>
@error('jenis_kelamin')
<div class="text-danger">{{ $message
}}</div> @enderror
</div>
</div>

<div class="form-group">
<label for="jurusan">Jurusan</label>
<select class="form-control" name="jurusan" id="jurusan">
<option value="Teknik Informatika"
{{ (old('jurusan') ?? $mahasiswa-
>jurusan)== 'Teknik Informatika' ?
'selected': '' }} > Teknik Informatika
</option>
<option value="Sistem Informasi"

82
 {{ (old('jurusan') ?? $mahasiswa-
>jurusan)== 'Sistem Informasi' ?
'selected': '' }} > Sistem Informasi
</option>
<option value="Ilmu Komputer"
{{ (old('jurusan') ?? $mahasiswa-
>jurusan)== 'Ilmu Komputer' ? 'selected':
'' }} >
Ilmu Komputer
</option>

</option>

<option value="Teknik Komputer"

{{ (old('jurusan') ?? $mahasiswa->jurusan)==
'Teknik Komputer' ? 'selected': '' }} > Teknik
Komputer

</option>
<option value="Teknik Telekomunikasi"

{{(old('jurusan')??$mahasiswa->jurusan)==
'Teknik Telekomunikasi'?'selected':''}} >
Teknik Telekomunikasi

</option>

</select>
@error('jurusan')

<div class="text-danger">{{ $message }}</div> @enderror

</div>
<div class="form-group">

<label for="alamat">Alamat</label>

<textarea class="form-control" id="alamat" rows="3" name="alamat">{{

old('alamat') ?? $mahasiswa->alamat}}</textarea>

</div>

<button type="submit" class="btn btn-primary mb-2">Update</button>

</form>

</div>

83
 </div>

</div>

</body>
</html>

Tambahkan script di views/mahasiswa (show.blade.php)

Resources/views/mahasiswa/show.blade.php

<div class="pt-3 d-flex justify-content-end align-items-center">

<h1 class="h2 mr-auto">Biodata {{$mahasiswa->nama}}</h1>
<a href="{{ route('mahasiswas.edit',['mahasiswa' => $mahasiswa->id]) }}"
class="btn btn-primary">Edit</a>
</div>

84
DELETE :

Tambahkan script di Route (web.php)

Routes/web.php

Route::delete('/mahasiswa/{mahasiswa}', 'MahasiswaController@destroy')
->name('mahasiswas.destroy');

Tambahkan script di Mahasiswa Controller (MahasiswaController.php)

App/http/controllers/MahasiswaController.php

public function destroy(Mahasiswa $mahasiswa)

{
$mahasiswa->delete();
return redirect()->route('mahasiswas.index')
->with('pesan',"Hapus data $mahasiswa->nama berhasil");
}

Tambah Script di views/mahasiswa (show.blade.php)

Resource/views/mahasiswa/show.blade.php

<!DOCTYPE html>
...
<div class="pt-3 d-flex justify-content-end align-items-center">
<h1 class="h2 mr-auto">Biodata {{$mahasiswa->nama}}</h1>
<a href="{{ route('mahasiswas.edit',['mahasiswa' => $mahasiswa->id])
}}" class="btn btn-primary">Edit</a>

<form action="{{ route('mahasiswas.destroy',['mahasiswa'=>$mahasiswa->id])

}}"
method="POST">
@method('DELETE')
@csrf
<button type="submit" class="btn btn-danger ml-3">Hapus</button>
</form>
</div>

85
Ketika sintaks delete sudah diterapkan akan tampil seperti ini

86
 DAFTAR PUSTAKA
Documentation laravel 5.1

Wikipedia

Php Manual

Laravel 5.1

87