Pemrograman Web

Sebelum ke pembahasan lebih lanjut, apa itu Pemograman Web?




Pemrograman web diambil dari 2 suku kata yaitu pemrograman dan web. Pemrograman yang dalam bahasa English adalah programming dan diartikan proses, cara, perbuatan program. Sedangkan Web adalah jaringan komputer yang terdiri dari kumpulan situs internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi melalui protokol transfer hypertext.

BAB 1 (PENDAHULUAN)

1. World Wide Web (WWW)


World Wide Web (WWW) adalah suatu program yang ditemukan oleh Tim Berners-Lee pada tahun 1991. Awalnya Berners-Lee hanya ingin menemukan cara untuk menyusun arsip-arsip risetnya. Untuk itu, beliau mengembangkan suatu sistem untuk keperluan pribadi. Sistem itu adalah program peranti lunak yang diberi nama Enquire. Dengan program itu, Berners-Lee berhasil menciptakan jaringan yang menautkan berbagai arsip sehingga memudahkan pencarian informasi yang dibutuhkan. Inilah yang dikenal sebagai WWW.



Pada tahun 1989 Berners-Lee membuat pengajuan untuk proyek pembuatan hiperteks global, kemudian pada bulan Oktober 1990, 'Waring wera Wanua' sudah dapat dijalankan dalam lingkungan CERN (Pusat Penelitian Fisika Partikel Eropa). Pada musim panas tahun 1991, WWW secara resmi digunakan sedara luas pada jaringan Internet.

1. Bagaimana WWW Bekerja
WWW bekerja merdasarkan pada tiga mekanisme berikut:

Informasi disimpan di dalam dokumen yang sering kita sebut halaman web
Halaman web adalah file-file yang disimpan dalam komputer. Komputer tersebut dikenal dengan istilah web server.
Komputer yang mengakses isi dari halaman web disebut dengan web clients.
Web Clients menampilkan halaman web dengan program yang dikenal dengan nama Web Browser  seperti Chrome, Firefox, Internet Explorer, dan Vivaldi.
2. Bagaimana Browser Menampilkan Halaman Web
Semua halaman web mengandung instruksi-instruksi tentang bagaimana dia akan ditampilkan
Browser menampilkan halaman tersebut dengan cara membaca intruksi-intruksi ini
Intruksi yang paling umum tersebut disebut dengan tag-tag HTML
Web browser akan mengurai kode HTML, menerjemahkannya serta menuliskan teks yang terkandung di dalam halaman web ke layer.



Banyak halaman web juga mengandung konten lain seperti gambar, script, CSS, dll. Browser akan membuat HTTP request tambahan pada web server untuk hal tersebut. Ketika browser menerima konten tersebut, browser secara progresif akan me-render konten tersebut dan menampilkannya ke layar.



3. Bagaimana HTTP Bekerja

Hypertext Transfer Protocol (HTTP) adalah protokol agar client dan server bisa berkomunikasi dengan gaya request-response. HTTP menentukan bagimana format pesan dan bagaimana cara pengirimannya, serta bagaimana web server dan browser beraksi dan bereaksi terhadap berbagai perintah.



BAB 2 (Pengenalan HTML)
A. Pengertian HTML



Hypertext Markup Language (HTML) adalah bahasa standard yang digunakan untuk menampilkan halaman web. Yang bisa dilakukan dengan HTML yaitu :

Mengatur tampilan dari halaman web dan isinya.
Membuat tabel dalam halaman web.
Mempublikasikan halaman web secara online.
Membuat form yang bisa digunakan untuk menangani registrasi dan transaksi via web
Menambahkan objek-objek seperti citra ,audio, video, animasi, java applet dalam halaman web.
Menampilkan area gambar (canvas) di browser.
B. Tag dan Elemen HTML 



Penanda perintah di dalam HTML biasanya disebut TAG. TAG digunakan untuk menentukan tampilan dari dokumen HTML.

Tag ada yang berpasangan dengan format berikut:



                                          <tag pembuka> isi dokumen </tag penutup>



Tag ada juga yang tidak berpasangan dengan format berikut:



                                                           <TAG> isi dokumen 

1. Head
Elemen HEAD kepala dari dokumen HTML. TAG <head> dan tag </head> terletak antara tag <html> dan tag </html>

Contoh:

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<html>

    <head>

    </head>

</html>





2. Title



Elemen TITLE merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>

Contoh:

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<head>

    <title>

    ..................

    </title>

</head>





3. Body



Elemen ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>. Elemen BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latar belakang dokumen yang akan ditampilkan pada browser.

Contoh:

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<html>

    <head>

        <title>

        .................

        </title>

    </head>

    <body>

    ...................

    </body>

</html>







4. Paragraf dan Pemformatan Teks



Penulisan paragraf bisa menggunakan tag <p>. Adapun untuk memformat tulisan/teks bisa menggunakan berbagai macam tag sesua dengan keperluannya sesuai dengan tabel berikut ini:



Tag

Deskripsi

<b>

  Membuat teks tercetak tebal

<em>

  Membuat penekanan pada teks

<i>

  Membuat teks tercetak miring

<small>

  Membuat teks tercetak kecil

<strong>

  Membuat teks tersebut penting

<sub>

  Membuat teks sebagai subscript

<sup>

  Membuat teks sebagai superscript





B. Komentar
Komentar sangat berguna untuk memberikan keterangan pada kode HTML. Dengan adanya komentar maka kode akan lebih mudah dibaca dan dimengerti sehingga ketika ada kesalahan akan lebih mudah diperbaiki.

Contoh Komentar dalam HTML:

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<html>

    <head>

        <title>

            Pemrograman Web dan Perangkat Bergerak

        </title>

    </head>

    <body>

        <h1>1. Pendahuluan</h1>

        <!- Ini adalah Komentar, dan Komentar tidak akan muncul di halaman web --> 

    </body>

</html>







C. List



Untuk menampilkan daftar dalam halaman web, HTML memiliki tag khusus untuk itu. Jika daftar tersebut tidak terurut (tampil menggunakan bullet), maka tag yang digunakan adalah <UL> yang berarti unordered list. Namun jika daftar tersebut adalah daftar yang penting urutannya, maka tag yang digunakan adalah <OL> yang berarti ordered list.

Contoh:



<html>

    <head>

        <title>

            Pemrograman Web dan Perangkat Bergerak

        </title>

    </head>

    <body>

        <h1>Tugas Pemrograman Web</h1>

        <h2>Genta Septi Akhiryan</h2>

        <ul>

            <li> Pendahuluan </li>

            <ol>

                <li> Latar Belakang </li>

                <li> Rumusan Masalah </li>

                <li> Tujuan </li>

            </ol>

            <li> Daftar Pustaka </li>

            <ol>

                <li> Definisi World Wide Web</li>

                <li> Pengenalan HTML </li>

            </ol>

        </ul>

    </body>

</html>




D. Link
Link menjadi penghubung antara satu halaman dengan halaman lainnya. Link merupakan suatu gambara atau teks yang terkait dengan suatu alamat tertentu. Jika Link diklik maka dokumen HTML akan menuju alamat tersebut. Dtandai dengan Anchor, yaitu tag <A>.



Tag <A> mempunyai dua atribut, yaitu HREF dan NAME. Atribute HREF digunakan jika sebuah anchor akan digunakan sebagai link, sedangkat atribut NAME digunakan jika anchor akan digunakan sebagai tujuan.

Contoh:



<html>

    <head>

        <title>

            Pemrograman Web dan Perangkat Bergerak

        </title>

    </head>

    <body>

        <h1>Tugas Pemrograman Web</h1>

        <a href="https://www.instagram.com/rioardsy/">Klik Disini</a>

        Untuk mengetahui tentang saya~

    </body>

</html>





E. Image
Tampilan halaman web akan lebih menarik jika ditambah media gambar. HTML mendukung banyak format gambar seperti: GIF, JPEG, PCX, PNG, WMF, dll. Namun jika gambar kita ingin dikenali oleh mayoritas browser, maka GIF dan JPEG adalah format paling cocok. Untuk menambah gambar digunakan tag <IMG>.



Daftar Atribut yang dimiliki tag <IMG>:



Atribut

Keterangan

SRC

  Menunjukan URL atau direktori tempat file gambar berada

WIDTH

  Lebar gambar (dalam pixel)

HEIGHT

  Tinggi gambar (dalam pixel

ALT

  Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan





Contoh:

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<html>

    <head>

        <title>

            Pemrograman Web dan Perangkat Bergerak

        </title>

    </head>

    <body>

        <img src="images/Gambar-1.jpg" ALT="Gambar pertama" align="center">

    </body>

</html>





F. Tabel



Tabel sering digunakan dalam website. Misalnya saja dalam menampilkan data siswa, rekap keuangan, dsb. Dengan tabel biasanya tampilan data akan terlihat lebih rapi. Tampilan data yang berasal dari database pun akan lebih nyaman dilihat jika ditampilkan dalam bentuk table.



HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu:

<TABLE> : Untuk mendefinisikan sebuah tabel

<TR> : Untuk mendefinisikan baris tabel (table row)

<TH> : Untuk mendefinisikan judul pada sel dalam tabel (table header)

<TD> : Untuk mendefinisikan isi tiap sel dalam tabel (table data)







BAB 3 (PHP)



A. Pengertian PHP



PHP adalah bahasa pemrograman script server-side yang didesain untuk pengembangan web. Selain itu, PHP juga bisa digunakan sebagai bahasa pemrograman umum. PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang dikelola oleh The PHP Group. Situs resmi PHP beralamat di http://www.php.net.

PHP disebut bahasa pemrograman server side karena PHP diproses pada komputer server. Hal ini berbeda dibandingkan dengan bahasa pemrograman client-side seperti JavaScript yang diproses pada web browser (client).

Pada awalnya PHP merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, PHP digunakan untuk membuat website pribadi. Dalam beberapa tahun perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang powerful dan tidak hanya digunakan untuk membuat halaman web sederhana, tetapi juga website populer yang digunakan oleh jutaan orang seperti wikipedia, wordpress, joomla, dll.

Saat ini PHP adalah singkatan dari PHP: Hypertext Preprocessor, sebuah kepanjangan rekursif, yakni permainan kata dimana kepanjangannya terdiri dari singkatan itu sendiri: PHP: Hypertext Preprocessor.




B. Struktur Dasar PHP


1.Variabel


Variabel berfungsi sebagai Wadah untuk menampung berbagai macam Tipe Data. Sedangkan Tipe Datamerupakan kumpulan data-data, dapat berupa bilangan maupun huruf


Karakteristik Variabel:



-> Diawali oleh simbol "$" kemudian diikuti oleh huruf, yang kemudian bisa diikuti oleh angka maupun huruf lagi
-> Bersifat Case Sensitive yaitu perbedaan besar kecil suatu huruf maka akan beda pula penamaan setiap variabel.      Contoh: $A tidak sama dengan $a
-> Tidak boleh menggunakan simbol, kecuali menggunakan underscore "_".
-> Tidak Boleh menggunakan spasi.
2.Tipe Data


Tipe Data berfungsi untuk mengisi nilai suatu variabel.


Ada beberapa contoh Tipe Data :


Integer = Merupakan Tipe Data Bilangan Bulat
Contoh : Bilangan bulat (Misal 0-10), Bilangan Negatif, Hexadecimal, Octal.
Floating = Merupakan Tipe Data untuk Pecahan/desimal
Contoh : 0.1 , 1.000 (Untuk Penggunaan tanda koma, diganti menjadi tanda titik). Misal, 1.000 = 1 (satu).
String = Merupakan Tipe Data untuk Huruf
Contoh : "WEBPROG", "MEI2014", "9999". Ciri khusus dari Tipe Data String adalah, setiap input tulisan berada diantara tanda kutip "..." .
3.Konstanta


Konstanta merupakan variabel konstan yang nilainya tidak berubah-ubah. Untuk mendefinisikan konstanta dalam PHP, menggunakan fungsi define() . Contoh :



<?define ("NAMA",Astrapia Me ");define ("NILAI",90);//Nama=Astra"; // akan menyebabkan errorecho "Nama:".NAMA;echo"<br>Nilai:".Nilai;?>


4.Komentar


Dalam PHP, Komentar digunakan sebagai, pengingat. Maksudnya adalah sebagai tanda untuk memberi nama program yang dibuat oleh Programmmer. Dalam PHP, komentar program bisa menggunakan : /* dan */ , // , dan #


<?
/* ini komentar tidak tercetak di layar
yang ini juga komentar 
*/
//Kalau ini Komentar satu baris
#Terus kalau ini juga komentar
echo "ini akan tercetak di layar";

?>

Komentar

Postingan populer dari blog ini

Cara Membuat Cloud Storage Server

Pengertian dan Keunggulan Framework Laravel

Langkah langkah membuat mail merge dengan data dari Excel