ebook Pemrograman PHP HTML

(1)

WEB PROGRAMING – HTML, CSS , PHP.

(2)

TABLE OF CONTENT

Introduction 0

Bab 1 Kenalan 1

Bab 2 Pengertian HTML 2

Bab 3 Menampilkan Gambar HTML 3

Bab 4 Tag iFrame 4

Bab 5 Membuat Paragraf 5

Bab 6 Membuat Hyperlink 6

Bab 7 Membuat Form HTML 7

Bab 8 Atribut Form HTML 8

Bab 9 Membuat List HTML 9

Bab 10 Memasukan Video Pada HTML 10

Bab 11 Pengertian CSS 11

Bab 12 Menghubungkan CSS dengan HTML 12

Bab 13 Mengenal Class dan ID 13

Bab 14 Membuat Desain Layout HTML CSS 14

Bab 15 Desain Tabel HTML dengan CSS 15

Bab 16 Membuat Button dengan CSS Style Flat Desain 16

Bab 17 Pengertian PHP 17

Bab 18 Mengenal Variabel 18

Bab 19 Mengenal Aritmatika 19

Bab 20 Membuat Kalukator Sederhana PHP 20

(3)

INTRODUCTION

E-Book yang ditujukan untuk pengenalan HTML,CSS, PHP Dasar ini , yang digunakan untuk

Pengembangan Aplikasi Berbasis Web. Materi yang disajikan bersifat praktik dan diharapkan pembaca bisa langsung coding untuk langsung merasakan dan mulai mengenal Materi ini . Diharapkan tidak Drag and Drop atau Copy - Paste karena belajar ngoding memang harus bener-bener ngodin. E-Book ini ditulis oleh M.Abdu Al-Afgani, pada tanggal 7 July 2019. Jika ada pertanyaan, kritik dan saran silahkan untuk mengirim email ke [email protected].

Biografi Penulis :

Freelancer Front End Web Developer and Desktop Developer, Dan Tersertifikasi Microsoft Office Specialist Excel oleh Microsoft Corporation Sejak Juni 2018 dan Menjuarai berbagai macam lomba programing tingkat Provinsi pada saat duduk di bangku Sekolah Menengah Kejuruan.

Social Media :

www.facebook.com/ganialaf97 www.instagram.com/ganialaf97

https://id.linkedin.com/in/m-abdu-al-afgani-16b229130 www.youtube.com/c/AlafGaniIT

(4)

BAB 1 KENALAN

Secara garis besar pada pembahasan yang akan kita bahas tentang HTML,CSS, dan PHP ini ialah sebuah Bahasa pmograman yang sangat popular di dunia. Bahasa ini masih digunakan sampai sekarang. Secara umum HTML ialah sebuah kerangka Website, CSS ialah bertugas untuk dibagian mempercantik sebuah tampilan halaman website, Sedangkan PHP bertugas untuk memberikan performa dalam mesin atau sebuah system pada website.

(5)

PENGERTIAN HTML

HTML adalah singkatan dari Hypertext Markup Language. digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di

dalam sebuah penjelajah Web Internet (Browser).

Disebut hypertext karena di dalamnya terdapat sebuah text biasa yang memiliki fungsi lain, kita bisa membuatnya menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya dengan meng-klik text tersebut.Sedangkan, disebut Markup Language sebab bahasa HTML menggunakan tanda (mark) yang digunakan untuk menandai bagian-bagian dari text.

Contoh HTML

Contoh bahasa HTML yang dapat digunakan untuk membuat sebuah website.

Kode-kode Dasar untuk membuat sebuah HTML adalah, sebagai berikut :

 <html> berguna untuk memulai sebuah HTML.

 </html> digunakan untuk menutup sebuah HTML dan diawali juga dengan garis miring “/”.

 <title> berguna untuk memberi judul pada yang nantinya akan muncul di Tab Browser.

 <head> berguna untuk Bagian Header atau atas.

 </head> berguna untuk penutup header dan diawali dengan garis miring “/”.

 <body> digunakan untuk bagian body atau isi dalam HTML

 </body> berguna untuk penutup/menutup Body dan diawali dengan garis miring “/”.

Fungsi HTML

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yaitu : 1. Membuat halaman web.

2. Menampilkan berbagai informasi di dalam sebuah browser Internet.

3. Membuat link menuju halaman web lain dengan kode tertentu (hypertext).

(6)

BAB 3

MENAMPILKAN GAMBAR HTML

Buat sebuah file bernama belajarhtml1.html dan ber extensi .html / pilih All Type pada notepad Anda atau di Texteditor.

1. Masukan gambar terlebih dahulu didalam folder HTML yang sudah kita save tadi

2. Ketikan Code HTML seperti ini

(7)

Kemudian Save. Dan buka File HTML tadi yang berada di folder. Maka hasilnya akan seperti ini :

Penjelasan :

Tag Html ini <img src="gambar.jpg"> berfungsi untuk menampilkan gambar yang berada dalam satu folder.

<html> , <head> dan <body> ini adalah struktur HTML yang wajib kita tuliskan untuk membuat sebuah halaman dan di akhiri dengan /.

(8)

BAB 4 TAG IFRAME

HTML <iframe> element digunakan untuk merepresentasikan konteks jelajah dari sebuah dokumen atau file lain untuk dimasukkan (embed) dalam dokumen yang bersangkutan.

<iframe> element sering digunakan untuk menyisipkan konten dari website lain, contohnya menyisipkan banner iklan dari website pihak tertentu, memasukkan widget ,dan memasukkan video dari sumber lain seperti Youtube, dan sejenisnya.

1. Buka Notepad atau Text Editor dan masukan tag iframe dan buat nama file belajarhtml.html dan file bernama iklan.html seperti ini :

belajarhtml.html

iklan.html

2. Kemudian buka browser dan file belajarhtml dan hasilnya akan seperti ini

Penjelasan :

<iframe id="iklaniframe" src="iklan.html"></iframe> fungsi yang akan menampilkan halaman (embed) website lain di dalam halaman website Anda.

(9)

MEMBUAT PARAGRAF

Untuk memahami cara pembuatan paragraf di dalam HTML sangat mudah kita hanya menuliskan tag <p> pada text editor.

Buka browser Anda dan akan menjadi seperti ini :

(10)

BAB 6

MEMBUAT HYPERLINK

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.

Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag <a>

setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href adalah singkatan dari hypertext reference).

Agar lebih jelas, buat kode seperti dibawah ini :

Bukan browser dari file HTML Anda dan akan menjadi seperti ini :

Penjelasan :

Tag ini <a href="http://www.instagram.com/ganialaf97">M.ABDU AL-AFGANI</a> berfungsi ketika Anda mengklik maka akan bertujuan ke link tertentu yang sudah Anda masukan pada script a href.

(11)

MEMBUAT FORM HTML

Pada dunia digital tentunya kita bisa mengisi sebuah formulir tanpa harus mengisi kertas yang mengunjungi tempat tersebut. Teknologi semakin canggih adanya Form Digital kita bisa mengisi formulir hanya ada di rumah tanpa harus ketempat tujuan.

Pada kesempatan ini Anda akan bisa membuat sebuah halaman depan form digital

menggunakan HTML. Tapi tidak sampai masuk ke proses system input data pada database server karena itu masuk ke pembahasan yang lain yaitu Back End System.

Masukan Script HTML seperti ini :

(12)

Cek browser dan buka file belajarhtml.html maka akan seperti ini :

Penjelasan :

1.<input type=”text”> : mendefinisikan bahwa tag input ialah khusus Karakter/Text.

2.<input type=”password”> : mendefinisikan bahwa tag input ialah khusus password atau hidden text.

3.<input type=”submit”> : mendefinisikan bahwa tag input ialah khusus tombol.

4.<input type=”chekbox”> : mendefinisikan bahwa tag input ialah khusus chekbox.

5.<input name=””> : mendefinisikan nama input karena untuk pemanggilan ada method di back end setiap name harus berbeda.

6. <form action="cek.php" method="POST"> Untuk pemanggilan sebuah file aksi yang akan memproses bahwa data sudah di request dengan method POST.

(13)

ATRIBUT FORM HTML

Pada pembahasan BAB 7 kita sudah bisa membuat Form HTML. Sekarang kita akan lebih tahu lagi mengenai atribut-atribut yang ada di Form HTML.

1. Atribut Value

Atribut Value merupakan atribut yang berfungsi untuk menentukan nilai awal dari elemen input.

Contoh:

First name:<br>

<br>

Last name:<br>

2. Atribut Readonly

Readonly merupakan sebuah atribut untuk menentukan nilai dari suatu input hanya bisa dibaca.

Contoh:

First name:<br>

<br>

Last name:<br>

3. Atribut Disabled

Disabled merupakan sebuah atribut yang berfungsi untuk menonaktifkan suatu kolom inputan atau tombol button

Contoh:

First name:<br>

<br>

(14)

Last name:<br>

4. Atribut Size

Atribut size digunakan untuk menentukan ukuran kolom inputan.

Contoh:

First name:<br>

<br>

Last name:<br>

5. Atribut Maxlength

Atribut maxlength digunakan untuk menentukan panjang maksimum karakter dari kolom inputan.

Contoh:

First name:<br>

<br>

Last name:<br>

6. Atribut Min dan Max

Atribut min dan max digunakan untuk menentukan suatu nilai minimum dan maksimum pada inputan.

Contoh:

(15)

BAB 9 LIST HTML

Dalam HTML, tag list terdiri dari 2 jenis, Ordered List (berurutan) dan Unordered List (tidak berurutan). Ordered List akan ditampilkan dengan angka atau huruf, sedangkan Unordered List dengan bulatan atau kotak.

Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>.

Contoh :

(16)

Browser :

Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.

(17)

Info : Di dalam HTML, selain ordered list dan unordered list, terdapat 1 lagi jenis list,

yaitu description list. Pembahasan tentang description list akan kita bahas dalam tutorial HTML Lanjutan

(18)

BAB 10

MEMASUKAN VIDEO HTML

Selain menampilkan informasi berupa text HTML bisa juga menampilkan berupa video untuk menampilkan informasi berupa visual. Seperti website Vidio.com,Youtube dan sejenisnya. Sebelumnya simpan video terlebih dahulu di dalam satu folder yang sudah dibuat sebelumnya.

Ketikan script seperti ini :

(19)

Penjelasan :

Fungsi <video width="320" height="240" controls autoplay> : Untuk memberi ukuran video lebar 320px dan tinggi 240px, dan membuat video terputar secara otomatis (controls autoplay).

<source src="video.mp4" type="video/mp4"> Memanggil dan menampilkan video ber extensi mp4.

(20)

BAB 11

PENGERTIAN CSS

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.

CSS dibuat dan dikembangkan oleh W3C (World Wide Web Consortium) pada tahun 1996 untuk alasan yang sederhana. Dulu HTML tidak dilengkapi dengan tags yang berfungsi untuk

memformat halaman. Anda hanya perlu menulis markup untuk situs.

Kelebihan CSS

Dengan CSS, Anda dapat mengatur tampilan semua aspek pada file yang berbeda, lalu

menentukan style dan bisa mempercantik halaman website Anda, kemudian mengintegrasikan file CSS di atas markup HTML. Alhasil, markup HTML bisa lebih mudah dimaintenance.

(21)

MEHUBUNGKAN CSS DENGAN HTML

Penggabungan CSS dan HTML ada terbagi menjadi 2. Internal dan External pemanggilan ini tergantung selera kita mau pakai mana. Tapi lebih baiknya di external atau diluar dari file html saja agar lebih mudah dan rapih.

Internal CSS

Hanya cukup dengan menuliskan <style></style> di file html nya.

External CSS

Untuk pemanggilan css diluar dari file html. Kita diharuskan membuat file ber extensi .CSS contoh style.css untuk pemanggilannya seperti ini :

(22)

BAB 13

MENGENAL CLASS DAN ID

Selector ID

Selector ID ini merupakan selector untuk menentukan bagian yang hanya ada satu pada halaman dan juga menentukan style nya. Jadi selector ID ini tidak bisa dipanggil lebih dari satu.

Jika ada dua, maka hanya bekerja pada bagian pertama saja. selector ini juga bisa untuk me link pada section dalam satu halaman, selector ID dituliskan dengan awalan pagar atau sharp atau kres “#” pada css. Untuk HTML nya menggunakan id=“namaID” .

Contoh penggunaan selector ID

<div id=”container”></div>

Pada CSS dapat dipanggil seperti ini :

#container {

text-align:center;

body-background:#FFFFFF;

}

Selector Class

Selector class juga digunakan untuk menentukan style juga sama seperti id. Bedanya adalah jika id hanya boleh dipanggil satu kali saja, class bisa dipanggil berkali kali pada satu halaman.

Selector ini ditulis dengan awalan titik atau dot “.” pada css dan class=“namaClass” pada HTML.

Contoh Penggunaan Class :

<div class=”box”></div>

Pada CSS dapat dipanggil seperti ini : .buku {

text-align:center;

body-background:#FFFFFF;

}

(23)

MEMBUAT DESAIN LAYOUT HTML

Sekarang kita akan coba membuat desain layout HTML yang akan kita gabungkan dengan CSS. Dengan bermacam Elemen-Elemen Struktur HTML.

Elemen Header

Elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.

Elemen Navigation

Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.

Elemen Sidebar

Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.

Elemen Konten

Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.

Elemen Footer

Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.

(24)

Buat sebuah file belajarhtml.html Dan ketikan kode html seperti ini :

<!DOCTYPE html>

<html>

<head>

<title>Judul Web Anda</title>

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

</head>

<body>

<div class="bingkai">

<div class="header">

<h1>WEB KAMU </h1>

</div>

<div class="menu">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">PHP</a></li>

</ul>

</div>

<div class="badan">

<div class="sidebar">

sidebar

<ul>

<li><a href="#">Tutorial HTML dasar</a></li>

<li><a href="#">Tutorial CSS dasar</a></li>

(25)

</ul>

</div>

<div class="content">

content

</div>

<div class="clear"></div>

<div class="footer">

footer

</div>

</body>

</html>

Kemudian buat sebuah file style.css dan ketikan kode css ini :

body{

background:#f4f4f4;

} .bingkai{

background: #DDD;

width: 900px;

margin: 20px auto;

border : #CCC solid 1px;

}

.bingkai .header{

(26)

background: #4287f5;

padding: 2px 10px;

}

.bingkai .menu{

background: gray;

width:100%;

height:40px;

}

.bingkai .menu ul{

padding: 0;

margin: 0;

}

.bingkai .menu ul li{

float: left;

list-style: none;

padding: 10px;

} .clear{

clear: both;

} .badan{

height: 450px;

}

.bingkai .badan .sidebar{

background: #FFF;

float: left;

width: 25%;

(27)

}

.bingkai .badan .content{

background: #f1f1f1;

float: left;

height: 100%;

width: 75%;

}

.bingkai .footer{

width: 100%;

padding: 10px;

}

Browser :

(28)

BAB 15

DESAIN TABEL HTML DENGAN CSS

HTML bisa membuat sebuah tabel bahkan bisa di gabungkan dengan css. Disini kita akan ambil contoh tabel siswa silahkan buat file belajarhtml.html dan style.css.

Penjelasan :

No. Fungsi Keterangan

1. <table> script table terdiri 3 tag yaitu : th, td, dan tr.

2. <td> kepanjangan dari table data, digunakan untuk membuat isi dari th atau baris 3. <th> kepanjangan dari table heading, digunakan untuk membuat judul sebuah table

seperti No, dan nama atau sejenisnya

4. <tr> kepanjangan dari table row, digunakan untuk mendefiniskan baris pada tabel

Style.css

Belajarhtml.html

(29)

MEMBUAT BUTTON STYLE FLAT MODERN

Apa itu flat desain? Flat desain memiliki ciri khas desain yang sangat elegan dan sangat simple.

Desain ini sering sekali digunakan oleh developer developer front end untuk mendesain UI atau tampilan website yang simple dan menawan.

source : https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwjJyu78nKLjAhVei3AKHQtVBNEQjRx6BAgBEAU&url=https%3A%2F%2Fwww.dictio.id%2Ft%2Fapakah-perbedaan- antara-material-flat-dan-minimal-desain%2F711&psig=AOvVaw0cLJp12qtUjaufg7fJNHkd&ust=1562568903736542

Kita ambil contoh membuat tombol flat desain menggunakan html dan css.

Belajarhtml.html Belajarhtml.html

(30)

Style.css

browser

(31)

PENGERTIAN PHP

PHP adalah bahasa pemrograman yang sering disisipkan ke dalam HTML. PHP sendiri berasal dari kata Hypertext Preprocessor. PHP adalah bahasa pemrograman yang sering disisipkan ke dalam HTML. PHP sendiri berasal dari kata Hypertext Preprocessor.

Bahasa pemrograman PHP biasanya tidak digunakan pada keseluruhan pengembangan website, melainkan dikombinasikan dengan beberapa bahasa pemrograman lain. Misalnya saja untuk mengatur tampilan, layout, dan berbagai macam menu menggunakan CSS dan HTML.

APA FUNGSI PHP ?

Fungsi PHP digunakan untuk BackEnd System. Yaitu selain kita mengutak ngatik script koding Front End seperti HTML,CSS,Javascrip. PHP pun penting sekali untuk berjalannya aplikasi.

Bahasa pemrograman PHP membantu Anda untuk mengembangkan aplikasi berbasis web yang cukup kompleks, handal, dan cepat. Tergantung dari spesifikasi bisnis, penggunaan hosting, tingkat pengalaman, kebutuhan aplikasi, dan pengembangan timeframe. Selain itu ada banyak PHP frameworks yang dapat Anda pilih.

Contoh Penulisan PHP

<?php // ini pembuka script php

?> //ini penutup script php

(32)

BAB 18

MENGENAL VARIABEL PHP

Apa Itu Variabel ?

Apa itu variabel? Variable adalah sebuah “container” yang dipakai buat menampung sesuatu yang disebut value/nilai . Misalkan, kita punya kalimat “belajar website”, untuk memanggil atau memunculkan kalimat ini kita tidak perlu menuliskannya berkali-kali, cukup hanya memasukkannya pada variable “A” kemudian panggil variable tersebut..

Sebelum kita membuat variable pada php siapkan terlebih dahulu alat bantu web server agar bisa dijalankan di local.

Download Xampp Web Server :

https://www.apachefriends.org/download.html

Tapi Untuk Cara Penginstalan Mohon Maaf tidak sampai masuk ke proses.

Setelah Anda download dan install bisa buat sebuah folder di dalam Xampp -> Htdocs -> Buat Folder(NamaFolderBebas)

1. Buat sebuah file bernama belajarphp.php dan simpan di dalam folder yang sudah dibuat.

2. Tulis Code PHP berikut seperti ini :

Hasilnya akan seperti ini :

(33)

$namasaya adalah variable. Variable diawali dengan symbol “ $ “ dan variable bebas kapan saja kita bisa membuatnya tergantung kebutuhan kita.

‘adadeh’ adalah sebuah nilai karakter yang bersifat string bisa dirubah sesuai kebutuhan, dan bagaimana dengan Angka? Kita bisa rubah menjadi angka menjadi ‘ 1 ‘ (tanpa tanda kutip) Echo adalah fungsi untuk memunculkan nilai variable di browser

Macam-Macam Tipe Data dalam Variabel

 Integer(int)

 Float

 String

 Boolean

 Array

Dan masih banyak yang lainnya.

(34)

BAB 19

MENGENAL ARITMATIKA PHP

Secara umum aritmatika seperti pengolahan angka dan di php Terdapat beberapa jenis operator pada PHP. Antara lain :

Operator Keterangan Contoh

+ Penjumlahan $a + $b

- Pengurangan $b - $a

* Perkalian $a * $b

/ Pembagian $a / $b

% Modulus/Sisa bagi $a % $b

++ Increment $a++

-- Decrement $b--

Contoh :

buat file belajarphp.php

BROWSER

(35)

MEMBUAT KALKULATOR SEDERHANA PHP

Tak terasa kita sudah sampai bab akhir. Di BAB 20 ini kita akan mencoba membuat kalkulator sederhana. Baiklah kita mulai

1. Buat file belajarphp.php 2. Ketikan kode seperti ini :

(36)

Maka Hasilnya seperti ini