LAPORAN PRAKTIKUM PEMROGRAMAN DAN WEB

(1)

LAPORAN PRAKTIKUM PEMROGRAMAN WEB

Kelas Pagi 1

Disusun oleh:

MERGINA LARASATI [ 201512034 ] SRI AYU PURWANTI [ 201512093 ] TATRIANA SAPUTRI [ 201512036 ]

Dosen Pengampu:

RIO JUMARDI, S.T., M.Eng.

PROGRAM STUDI TEKNIK INFORMATIKA SEKOLAH TINGGI TEKNOLOGI BONTANG

(2)

ii

HALAMAN PENGESAHAN

LAPORAN PRAKTIKUM

PEMROGRAMAN WEB

Disusun oleh :

Mergina Larasati (201512034) Sri Ayu Purwanti (201512093) Tatriana Saputri (201512036)

Telah diperiksa dan disetujui oleh Dosen

Pada tanggal : 10 Juni 2016

Menyetujui,

Dosen Pengampu

(3)

iii

KATA PENGANTAR

Puji syukur kami panjatkan kehadirat Allah swt.karena atas segala berkah, taufik dan hidayah-Nya kami dapat menyelesaikan Laporan Praktikum mata kuliah Pemrograman Web. Tugas ini disusun untuk melengkapi dan memenuhi salah satu tugas mata kuliah Pemrograman Web pada semester 2.

Dalam penulisan tugas ini, kami mendapatkan bimbingan serta dukungan dari berbagai pihak. Oleh karena itu pada kesempatan ini, kami mengucapkan terima kasih kepada semua pihak yang telah mendukung.

Kami berharap makalah yang telah dibuat ini dapat menambah wawasan dan pengetahuan tentang Pemrogaman Web dan cara bagaimana menggunakan HTML, CSS, dan PHP serta program program lain yang mendukungnya

Kami menyadari bahwa didalam makalah ini masih banyak kekurangan-kekurangan yang harus di benahi dan diperbaiki. Oleh karena itu kritik maupun saran yang membangun dari pembaca senantiasa kami terima demi penyempurnaan penulisan di masa yang akan datang.Demikian tugas ini kami buat semoga bermanfaat bagi kita semua.

.

Bontang, Mei 2016

(4)

iv

DAFTAR MODUL PROGRAM ... viii

BAB I ... 1

3.1. Source Code HTML dari Latihan1.html ... 10

3.2. Source Code CSS dari Latihan1.css ... 13

3.3. Source Code HTML Untuk Membuat Navigation Bar ... 15

3.4. Source Code CSS Untuk Membuat Navigation Bar ... 16

3.5. Source Code HTML dan PHP Untuk Membuat FORM ... 18

3.6. Source Code HTML dan PHP Untuk Membuat Hasil Input dari FORM ... 21

3.7. Source Code HTML Untuk Membuat Program Perulangan Menggunakan FOR ... 24

3.8. Source Code HTML dan PHP Untuk Membuat Hasil Perulangan Menggunakan FOR 24 BAB IV ... 28

PENUTUP ... 28

4.1. Kesimpulan ... 28

(5)

v

(6)

vi

DAFTAR GAMBAR

Gambar 3.1.Output program dari latihan1.html dan latihan1.css...15 Gambar 3.2.Lanjutanoutput program dari latihan1.html dan latihan1.css...16 Gambar 3.1.Output program dari source code dengan CSS untuk membuat

navigationbar... ...19

Gambar 3.1. Output program dari Source Code HTML dan PHP untuk membuat FORM ...24

Gambar 3.2. Output program dari Source Code HTML dan PHP untuk membuat hasil inputan

FORM ...24

Gambar 3.1. Output program dari Source Code HTML untuk membuat perulangan menggunakan FOR...27

Gambar 3.1.Output program dari Source Code HTML dan PHP untuk membuat hasil perulangan menggunakan for ...28

Gambar 3.2.Lanjutanoutput program dari Source Code HTML dan PHP untuk membuat perulangan menggunakan for ...29

(7)

vii

DAFTAR TABEL

(8)

viii

DAFTAR MODUL PROGRAM

Modul Program 3.1.Source Code HTML latihan1.html ...11

Modul Program 3.2. Lanjutan Source Code HTML latihan1.html ...12

Modul Program 3.1.Source Code CSS latihan1.css ...14

Modul Program 3.1.Source Code HTML Untuk Membuat Navigation Bar...16

Modul Program 3.2. Lanjutan Source Code HTML Untuk Membuat Navigation Bar ...17

Modul Program 3.1.Source Code CSS Untuk Membuat Navigation Bar ...17

Modul Program 3.2.Lanjutan Source Code CSS Untuk Membuat Navigation Bar ...18

Modul Program 3.1.Source Code HTML dan PHP Untuk Membuat FORM ...19

Modul Program 3.2. Lanjutan Source Code HTML dan PHP Untuk Membuat FORM ...20

Modul Program 3.1. Source Code HTML dan PHP Untuk Membuat Hasil Input dari FORM ...22

Modul Program 3.2. Lanjutan Source Code HTML dan PHP Untuk Membuat Hasil Input dari FORM ...23

Modul program 3.1. Source Code HTML Untuk Membuat Program Perulangan Menggunakan FOR ...25

Modul Program 3.1. Source Code HTML & PHP Untuk Membuat Hasil Perulangan Menggunakan FOR ...25

(9)

1

BAB I PENDAHULUAN 1.1.Latar Belakang

Dalam dunia industri yang maju sangat pesat ini, tidak menutup kemungkinan dari hasil karya sekumpulan manusia yang mempuyai suatu tujuan. Di masa yang sudah canggih ini kita sering menggunakan Web (website atau situs) dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik

website.Bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari pemilik serta pengguna website. Contoh website

statis adalah berisi profil perusahaan, sedangkan website dinamis adalah seperti Friendster, Multiply, dll. Dalam sisi pengembangannya, website statis hanya bisa diupdate oleh pemiliknya saja, sedangkan website dinamis bisa diupdate oleh pengguna maupun pemilik.

Website ini digunakan untuk mencari tahu informasi yang kita butuhkan, bahkan kita bisa berkomunikasi dengan orang lain pun lewat jejaring sosial. Di dalam kita berselancar di dunia maya kita memerlukan browser untuk mencari informasi apa yang kita inginkan di dunia maya. Lewat browserterdapat script – script yang di mengerti oleh computer.Dan penulis membahasnya dalam laporan praktikum ini yaitu mengenai HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets), dan PHP(HyperText Preprocessor).[1]

1.2.Tujuan

Tujuan dari praktikum ini adalalah sebagai berikut :

1. Tujuan dibuatnya laporan praktikum ini adalah untuk memenuhi tugas mata kuliah Pemrograman Web dan untuk berbagi ilmu kepada para pembaca.

2. Mengimplementasikan bahasa pemrograman PHP (HyperText Preprocessor)

3. Dapat membuat dokumen HTML dengan menggunakan permainan warna dan berbagai jenis tampilan teks

(10)

2 5. Memahami dan mennhetahui :

a. Fungsi HTML pada pemrograman berbasis web b. Struktur HTML pada pemrograman berbasis web c. Konsepdasar CSS dan penggunaannya pada web.

1.3.Manfaat

a. Manfaat dalam penulisan Laporan Akhir Pemrograman Web adalah agar dapat mengasah keterampilan penulis dalam bidang ilmu pengetahuan dan teknologi b. Sebagaibahan acuan untuk dapat membuat skripsi.

1.4.Alat dan Bahan

Table 1.1. Alat dan bahan

No. Perangkat Keterangan

1. Laptop ASUS

2. Sistem Operasi Windows

Adalah keluarga sistem operasi komputer pribadi yang dikembangkan oleh Microsoft yang menggunakan antarmuka dengan pengguna berbasis grafik (graphical user interface). [6]

System operasi windows yang digunakan adalah Windows 7

3. Sublime Text 3 (Software Editor) Sebuah teks editor

4. Server local XAMPP

Free software yang mendukung banyak sistem operasi dan merupakan kompilasi dari beberapa program. [5]

5. Browser (Mozila Firefox/Chrome)

adalahperangkat lunak yang berfungsi untuk menerima dan menyajikan sumber informasi di Internet. Sebuah sumber informasi diidentifikasi dengan

(11)

3

BAB II DASAR TEORI 2.1. HTML

HTML merupakan singkatan dari Hypertext Markup Language.HTML digunakan untuk membangun halaman web. HTML digunakan untuk melakukan mark-up (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan untukmenentukan format atau style dari teks yang ditandai halaman web dibangun oleh kode-kode HTML.

HTML adalah bahasa markup yang umum digunakan.Kepopuleran HTML disebakan karena HTML ini mudah digunakan. Pembuatan dokumen web dengan HTML dapat dilakukan dengan mudah dan cepat. Dokumen web dapat tersaji dengan cepat ke banyak pembaca di seluruh dunia sekaligus. HTML mudah melakukan kontrol terhadap tampilan halaman web baik berupa teks, gambar, suara, animasi maupun video.

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan web browser seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.[1]

Hypertext Markup Language merupakan standar bahasa yang di gunakan untuk menampilkandocument web, yang bisa anda lakukan dengan HTML yaitu :[3]

a. Mengontrol tampilan dari web page dan kontennya.

b. Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia. c. Membuat online form yang bisa di gunakan untuk menangani pendaftaran,

transaksisecara online.

d. Menambahkan object-object seperti image, audio, video dan juga java applet dalamdocument HTML.

Fungsi HTML

HTML seperti yang dijelaskan sebelumnya merupakan bahasa pemrograman berbahasa

markup yang digunakan untuk menampilkan halaman website melalui browser. Namun tentu bukan hal iu saja yang dapat dilakukan HTML.

(12)

4

1. Membuat, mendesain, dan mengontrol tampilan dari web page (Halaman Web) dan isinya. 2. Mempublikasikan document secara online sehingga bisa di akses, dilihat dan ditampilkan

dari dan ke seluruh dunia.

3. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara

online.

4. Menambahkan object-object seperti image, audio, video dan juga java applet (aplikasi java seperti java game dll) dalam document HTML.

5. Membuat link menuju halaman web lain dengan kode tertentu (hypertext). Berikut adalah struktur HTML : [1]

A. Elemen

Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tagpenutup.Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan elemen title, dimana:

<title> ini adalah tag pembuka judul dokumen HTML B. Tag

Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body>ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.

C. Atribut

Atribut mendefinisikan properti dari suatu elemen/tag dari HTML, yang terdiri atas nama dan nilai.

2.2. CSS

Cascading Style Sheets dapat diartikan berupa aliran dari suatu kode ke kode lain yang saling berhubungan dengan fungsi untuk mengatur format / tampilan suatu halaman HTML[2]

Keuntungan Menggunakan CSS :[2]

1. Memudahkan dalam penggantian format secara keseluruhan 2. Lebih praktis

(13)

5 Apa itu CSS :[3]

a. Feature untuk membuat dynamic HTML.

b. Style sheet mendeskripsikan bagaimana tampilan document HTML di layar (template) c. Membuat spesial efek (mendefinisikan style untuk <H1> dengan style bold dan italic dan

berwarna biru)

d. Support ke semua browser.

Aturan Penulisan Pada CSS

Perintah untuk CSS diawali dengan selector lalu diikuti dengan sepasang kurung kurawal yang didalamnya berisi atribut dari css, [1]

Contoh :

h1{color:red;} Keterangan :

a. h1 adalah selector(semua tag “h1” dalam kode html akan diatur disini)

b. color merupakan sebuah property dari CSS c. danred adalah value / nilai dari property CSS. Sintak CSS dibagi dalam 3 bagian :[3]

selector {property : value} dimana :

a. selector : tag HTML yang akan didefinisikan (body, H1, Link , dll). b. property : atribut yang akan diubah

Cara penulisan yang benar: a. font-family : sans-serif; b. font-size: small;

Cara penulisan yang salah : a. font-family: “sans-serif”;

b. font-size : ‘small’;

Cara mendeklarasikan kelompok : (tanda koma serta &) a. H1, H2 {color : green};

(14)

6

1. Menggunakan tanda : /* ….. */

2. Menggunakan tanda :<!-- - - >

Barikut adalah pengelompokan Selector : [2]

Perintah CSS juga dapat dituliskan dengan berbagai macam selector dengan cara menggunakan pemisah koma, contoh jika ingin mengatur tag-tag h1, h2, h3 dengan pengaturan berwarna merah, maka perintah CSSnya sebagai berikut :

h1, h2, h3{color:red;}

Penggunaan Multi Property - Untuk mengatur lebih dari satu property gunakan pemisah titik koma (;).

Contoh :

Pemasangan CSS pada HTML

Ada 3 cara menggunakan CSS ke dalam HTML:[2] 1. Inline CSS

Yaitu kode CSS yang dituliskan langsung ke dalam tag HTML, penulisan dengan cara ini tidak memerlukan selector dalam CSS.

Contoh :

2. Embedded CSS

Menempelkan kode CSS diantara tag <head> dan </head> atau dapat juga diantara tag

<body> dan </body>.

Contoh :

3. Import CSS file

Yaitu kode CSS yang dituliskan pada file tersendiri berekstensi .css, untuk cara penggunaannya menggunakan tag <link>. Contoh :

<head>

(15)

7

Keterangan : Pada kode href merujuk pada file CSS, yaitu berada pada folder css dengan nama

file style.css.

Class Selector

Class selector adalah penulisan selector untuk sekelompok elemen yang sering digunakan pada beberapa elemen. Format penulisan class selector : .nama_class_selector{property:value;} Deklarasi pada HTML menggunakan atribut class.[2] Contoh :

Penulisan kode css :

Pemakaian kode CSS ke HTML :

ID Selector :[2]

a. ID selector digunakan untuk menentukan format style pada elemen tunggal yang unik b. Menggunakan atribut id pada HTML, dan didefinisikan dengan tanda # pada sintak CSS. Contoh :

Pemanggilan pada Division :

2.3. PHP

PHP (HyperText Preprocessor) merupakan bahasa pemrograman server side programming yang berfungsi untuk membuat website bersifat dinamis. Halaman website

dinamis memberikan kesempatan kepada user untuk dapat berinteraksi dengan halaman

.tengah{text-align:center;} p.tengah{color:red;}

h1.kiri{color:blue;} h1.tengah{color:black;}

<p class=“tengah”>Teks tengah akan berwarna merah</p><div class="tengah">

<h1>Tag h1 tengah akan berwarna hitam</h1> </div>

<h1 class="kiri">Tag h1 kiri akan berwarna biru</h1>

#selector{ color:red; }

(16)

8

webtersebut (dengan kata lain, user yang lain dapat mengakses halaman web yang sama, bisa admin situs maupun pengunjung lain).

Contoh diperlukannya halaman web dinamis ketika ingin membuat halaman buku tamu, atau ingin membuat aplikasi-aplikasi database.Halaman Web database juga mempermudah admin situs untuk merawat (Maintenance) situs yang dimilikinya.

Database MySQL

Sebuah website yang interaktif dan dinamis, tentu membutuhkan penyimpanan data yang

fleksible dan cepat untuk diakses.Salah satu database untuk server adalah MySQL. Jenis

database ini sangat popular dan digunakan pada banyak website di internet sebagai bank data. MySQL (Structured Query Language) dan bersifat free (Gratis). Selain itu MySQL dapat berjalan di berbagai jenis platform, antara lain Linux, Windows, dan sebagainya.

PHP telah menyediakan fasilitas untuk koneksi ke hamper semua program database

popular baik yang bersifat komersial maupun gratis. Dalam praktikum ini, database yang digunakan adalah MySQL dan bahasa PHP untuk mengakses database MySQL. Secara umum akses database harus melalui tiga tahap, yaitu: [5]

1. Koneksi ke database

2. Query ke database

3. Pemutusan koneksi dari database

Latihan menampilkan variabel menggunakan html dan php, contoh program sederhana bagi pemula. Latihan ini menggunakan umur sebagai variabel pemasukan data, dengan dua file

program php. Dimana kedua file tersebut disimpan dengan nama input variabel dan umur, kedua file tersebut jangan lupa ditaruh dalam satu folder. File input variabel digunakan untuk pemasukan data, sedangkan file umur untuk menampilkan variabel. Adapun listingprogramnya sebagai berikut:[3]

Cara penulisan PHP

PHP bersifat case sensitif yang artinya semua penulisannya harus sesuai dengan kamus data yang tersedia. Secara mendasar php memiliki struktur sebagai berikut :[3]

<?php

//Ini contoh komentar dalam php

echo "<h2>Contoh sederhana penulisan PHP</h2>"; $nama="Satria Multimedia";

(17)

9

Kode diatas adalah contoh sederhana struktur PHP, berikut penjelasanya :[3]

1. Awal kode harus diawali dengan "<?php" dan diakhiri dengan "?>", 2 perintah tersebut harus ada pada tiap bagian yang memanggil fungsi php.

2. Dalam barisan perintah php, kita bebas menyisipkan komentar dengan diawali tanda "//". Komentar digunakan untuk mempermudah mengingat kumpulan baris dengan proses yang sama

3. Echo digunakan untuk mengirimkan hasil ke browser, sehingga yang dikirimkan adalah bagian yang berada setelah perintah echo

4. Setiap variabel harus diawali dengan tanda dolar "$" dan dapat dipanggil kapanpun dalam halaman yang sama.

2.3. Xampp

XAMPP adalah free software yang mendukung banyak sistem operasi dan merupakan kompilasi dari beberapa program. Berfungsi sebagai server yang berdiri sendiri (localhost), yang terdiri dari Apache HTTP server, MySQL database dan penerjemah bahasa yang ditulis dengan bahasa PHP dan Perl.Nama XAMPP merupakan singkatan dari X (empas system operasi apapun), Apache, MySQL, PHP, dan Perl.

Program ini tersedia dalam GPU General Public Licence dan bersifat free, merupakan web server yang mudah digunakan dan dapat melayani tampilan halaman web yang dinamis. Dalam XAMPP terdapat beberapa bagian penting, yaitu: [5]

1. Htdocs, adalah folder tempat meletakkan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, dan script lain.

2. phpMyAdmin, adalah bagian untuk mengelola basis data MySQL yang ada di computer. Untuk membukanya harus menggunakan browser dan mengetikkan alamat http://localhost/phpmyadmin.

3. Control Panel, berfungsi untuk mengelola layanan (service) XAMPP, seperti menghentikan (stop) layanan, maupun memulai (start).

$nilai=10;

$hasil=$nilai+10; echo $hasil;

(18)

10

BAB III PEMBAHASAN

3.1. Source Code HTMLdari Latihan1.html

Modul Program 3.1Source Code HTML latihan1.html

<title>pemograman web</title>

<body>

<p> Kunjungi Halaman Website Stitek di <a href="www.stitek.ac.id"> www.stitek.ac.id </a></p>

<h1> Visi dan Misi STITEK </h1> <h2>Visi</h2>

<ul>

<li> Berkualitas dan Unggul di Bidang <u>IPTEK</u> dan <u>Riset</u> Serta Sejahtera pada Tahun 2030</li>

</ul>

<li> Melaksanakan Pendidikan dan Pengembangan Inovasi dalam pendidikan dengan memanfaatkan teknologi komunikasi dan informasi dengan kebutuhan masyarakat dari waktu ke waktu </li>

<li> Menumbuhkan budaya riset dan melaksanakan riset dan melaksanakan riset berskala lokal, nasional dan internasional</li>

<li> Melaksanakan goodgovermance dalam bidang <b><i>Tri Darma Perguruan Tinggi</b></i> dan pendukungnya </li>

<li> Melaksanakan kegiatan kewirausahaan yang mendukung kegiatan <b>STITEK</b> secara sah dan akuntabel, sertamengelolanya sebagai asset kekayaan usaha komersial </li>

<li> Mendorong melaksanakan pengembangan modal memadai bagi pembagunan <b>STITEK</b> dan megelolanya sebagai asset kekayaan intelektual </li>

<li> Memiliki Master Plan pengembangan <b>STITEK</b></li>

<li> Berperan aktif dalam ikut mensejahterakan kehidupan bangsa dan Negara </li>

ol>

(19)

11

Modul Program 3.2LanjutanSource CodeHTML latihan1.html

</tr>

<fieldset><legend>Form Kontak</legend>

(20)

12

Pembahasan Modul Program 3.1. sampai modul program 3.2. Lanjutan Source Code HTML latihan1.htmladalah sebagai berikut :

Tag <HTML> dan </HTML> digunakan untuk menandai awal dan akhir dari suatu file

HTML, yang menandakan bahwa kode yang terdapat didalamnya adalah kode html, sehingga browser akan menerjemahkan sebagai dokumen html.

Tulisan yang berada diantara tag <TITLE> dan </TITLE>akan ditampilkan oleh browser pada bagian title yang mana merupakan title dari jendela browser.

Tag <HEAD></HEAD> berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara head tags.

Tag <BODY></BODY> bagian tag body menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut dapat ditentukan.

Tag <TABLE></TABLE> berfungsi untuk membuat tabel. Border atribut ini menentukan tebal dari border sewaktu ditampilkan oleh browser.

Tag <tr></tr> merupakan penanda baris, tag <td></td> untuk penanda kolom. Atribut “colspan” untuk menggabungkan cell dalam satu baris dan atribut “rowspan” untuk

menggabungkan cell dalam satu kolom.

Tag<ul></ul>digunakan untuk mengawali dan mengakhiri suatu Unordered List.

Tag <link rel=“stylesheet” type=“text/css” href=“latihan1.css”> , dimana <link, merupakan

tag pembuka diakhiri dengan tanda “>”. Lalu rel=“stylesheet”, menerangkan halaman ini

akan dikenai efek style sheet, dan type=“text/css” adalah file yang dipanggil berupa css. [4] Tag <fieldset><legend>Form Kontak</legend></fieldset> berfungsi untuk mengelompokkan beberapa objek form menjadi sebuah kelompok, sedangkan tag legend berfungsi untuk menampilkan judul dari kelompok objek form tersebut.

Tag <p><a href="www.stitek.ac.id"> www.stitek.ac.id </a></p>, dimana <p></p> merupakan tag untuk membuat paragraph baru. Lalu <a></a> merupakan tag untuk membuat alamat link. Dan href="www.stitek.ac.id”, adalah alamat yang akan dituju.

(21)

13

memproses isi data form.Karena pada program tidak diberikan alamat yang dituju maka dapat ditulis dengan simbol tagar.

Tag <input> adlah tag yang paling banyak digunakan di dalam form dan memiliki banyak benuk, mulai dari teks biasa, text password, checkbox, radio, sampai dengan tombol

submit.<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 input nilai atau value.

Tag <select></select> digunakan untuk inputan yang telah tersedia nilainya, dan user

hanya dapat memilih dari nilai yang ada.Tag selectdigunakan bersama-sama dengan tag <option></option> untuk membuat box pilihan.

Tag <textarea></textarea>pada dasarnya sama dengan input type text, namun lebih besar dan dapat berisi banyak baris.

Tag <img src="sakura3.jpg" width="1330" height="225">digunakan untuk menampilkan gambar kedalam halaman web, dimana atribut src="sakura3.jpg"src adalah singkatan dari

source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkandan ektensi gambar dapat berupa JPG, JPEG, PNG, atau GIF.

3.2. Source Code CSS dari Latihan1.css

Modul Program 3.1.Source Code CSS latihan1.css

Pembahasan modul program 3.1. source code CSS latihan1.css :

Berikut ini merupakan pembahsan dari modul program diatasyang pertama adalah selector

yang berfungsi sebagai selector dari modul program diatas adalah :

body{background-color:lightseagreen;

}

(22)

14 Body, form, tr:hover, th, table, ol, ul, h2, h1.

Yang kedua adalah yang bertugas sebagai propertyyaitu :

1. Background-color merupakan sebuah property untuk mengatur warna dasar dari CSS

Font-family: merupakan sebuah property untuk mengatur jenis huruf dari CSS.

2. Margin-left: digunakan untuk memberikan spasi disisi luar element khususnya disisi bagian kiri.

3. Color: merupakan sebuah property untuk mengatur warna pada tulisan dari CSS dan adalah value/nilai property CSS

4. Hover: bisa digunakan untuk mengatur style teks / warna tautan ketika pointer mouse menyentuh konten atau tepat di atas teks tautan.

Dan yang terakhir adalah yang bertugas sebagai value diantaranyaviolet, deeppink, cyan, salmon, lightseegreen, salmon, arial, dan 300px adalah value / nilai dari property CSS.

Berikut adalah hasil outputprogramnya :

(23)

15

Gambar 3.2.LanjutanOutput program dari latihan1.html dan latihan1.css

3.3. Source Code HTML Untuk Membuat Navigation Bar

Modul Program 3.1.Source CodeHTML Untuk Membuat Navigation Bar <html>

<head>

<title>Beranda</title>

<body>

<a class="head">Dhofwatul'Aisy</a> </div>

<li><a class="menu">Beranda</a></li> <li><a class="menu">Profil</a></li> <li><a class="menu">Galeri</a></li> <li><a class="menu">Kontak</a></li> </ul>

</div>

<ul><li> Berkualitas dan Unggul di Bidang <u>IPTEK</u> dan <u>Riset</u> Serta Sejahtera pada Tahun 2030</li>

</ul>

(24)

16

Modul Program 3.2. Lanjutan Source Code HTML Untuk Membuat Navigation Bar

Pembahasansan untuk Modul Program 3.1.sampai 3.2. Lanjutan Source Code HTML Untuk Membuat Navigation Bar adalah sebagai berikut :

Dalam script program tersebut terdapat tag <div></div> yang berfungsi sebagai

containeratau pembatas satu struktur HTML dengan struktur lainnyayang dalam penggunaanya, di dalam tag div tersebut akan diberikan id atau class sebagai pembeda antara div yang satu dengan yang lainnya.

3.4. Source Code CSS Untuk Membuat Navigation Bar

Modul Program 3.1.Source CodeCSS Untuk Membuat Navigation Bar

<li> Melaksanakan Pendidikan dan Pengembangan Inovasi dalam pendidikan dengan memanfaatkan teknologi komunikasi dan informasi dengan kebutuhan masyarakat dari waktu ke waktu </li>

<li> Menumbuhkan budaya riset dan melaksanakan riset dan melaksanakan riset berskala lokal, nasional dan internasional</li>

<li> Melaksanakan goodgovermance dalam bidang <b><i>Tri Darma Perguruan Tinggi</b></i> dan pendukungnya </li>

<li> Melaksanakan kegiatan kewirausahaan yang mendukung kegiatan <b>STITEK</b> secara sah dan akuntabel, sertamengelolanya sebagai asset kekayaan usaha komersial </li>

<li> Mendorong melaksanakan pengembangan modal memadai bagi pembagunan <b>STITEK</b> dan megelolanya sebagai asset kekayaan

intelektual </li>

<li> Memiliki Master Plan pengembangan <b>STITEK</b></li> <li> Berperan aktif dalam ikut mensejahterakan kehidupan bangsa dan Negara </li>

</ol> width: 1000px;margin:0 auto;height: 100px;

line-height: 100px;border-radius:10px 10px 0px 0px;

border-bottom:7px solid orchid;box-shadow: 10px 10px 10px gray; }

(25)

17

Modul Program 3.2.Lanjutan Source CodeCSS Untuk Membuat Navigation Bar

Pembahasan untuk Modul Program 3.1.sampai 3.2. Lanjutan Source CodeCSS Untuk Membuat Navigation Bar adalah sebagai berikut :

Dalam source code program tersebut terdapat propertydisplay: inline-block; dimana berfungsi untuk menampilkandan nilai "inline" mendefinisikan sebuah elemen akan ditampilkan "inline" atau dalam baris yang sama dengan elemen yang lain tetapi jika layar tidak muat maka secara otomatis membuat baris baru.

Terdapat selectror “a.menu” dan “a.menu:hover” perbedaan antara keduanya adalah jika

selctornya hanya “a.menu” berarti ini keadaan awal menu sebelum disentuh pointer dan jika

selectornya berupa “a.menu:hover” berarti ini adalah keadaan saat disentuh oleh pointer.

Pada potongan source codejugaterdapat property “background:-moz-linear-gradient (top, lightseagreen, skyblue, darkturquoise,skyblue,lightseagreen)”, dimana fungsinya tak lain

adalah untuk mengatur warna latar belakang. Tujuan menggunakan “-moz-linear-gradient

(top, lightseagreen, skyblue, darkturquoise,skyblue,lightseagreen)”, dimana format – moz-linear-gradient agar gradasi warna yang digunakan dapat terlihat di Mozila dan (top, lightseagreen, skyblue, darkturquoise, skyblue, lightseagreen) adalah gradasi warna yang dimulai dari atas lalu turun ke bawah.

Selector “padding” berfungsi untuk memberikan spasi pada sisi dalam sebuah elemen. Selain selector“padding” juga terdapat selector“font-weight: bold;” dengan velue “bold”,

.nav{background-color:darkturquoise; width: 1000px;

margin:0 auto;

(26)

18

selector ini berfungsi untuk mengatur ketebalan suatu huruf. Selanjutnya adalah selector“text -shadow: 3px 3px 3px gray”

Dan property“margin:0 auto”, dimana margin sendiri berfungsi untuk memberikan spasi diluar elemen, serta nilai 0 autoagar elemen berada pada posisi center secara horizontal

terhadap container-nya. Elemen tersebut akan mengambil lebar yang sudah ditentukan, dan ruang yang tersisa akan dibagi secara rata antara margin kiri dan kanan.

Berikut adalah hasil outputprogramnya :

Gambar 3.1.Output program dari source code dengan CSS untuk membuat navigation bar

3.5. Source Code HTML dan PHP Untuk Membuat FORM

Modul Program 3.1.Source Code HTML dan PHP Untuk Membuat FORM <html>

<head><title>Latihan PHP</title></head> <body>

<tr>

(27)

19

Modul Program 3.2.Lanjutan Source Code HTML dan PHP Untuk Membuat FORM <tr>

<tr>

<td>Alamat</td> <td>:</td>

<?php for($i=1992; $i<=2000; $i++){

echo”<option value=$i>$i</option>”;} ?></select></td> <tr>

<td>Jenis Kelamin</td> <td>:</td>

<td><input type=”radio” name=”jk” value=”Laki-Laki”/>Laki -Laki

<input type=”radio” name=”jk” value=”Perempuan”/>Perempuan</td> </tr>

<tr>

(28)

20

Pembahasan untuk Modul Program 3.1.sampai 3.2. Lanjutan Source Code HTML dan PHP Untuk Membuat FORM :

Tag <fieldset><legend><b>Form</b></legend></fieldset> berfungsi untuk mengelompokkan beberapa objek form menjadi sebuah kelompok, sedangkan tag legend berfungsi untuk menampilkan judul dari kelompok objek form tersebut.

Tag <form method="post" action="terima.php" ></form>, berfungsi untuk membuat sebuah form, dimana atribut method berfungsi untuk menjelaskan bagaimana data isian

formakan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post. Kemudian atributaction, yang berfungsi untuk menjelaskan kemana data form akan dikirimkan. Pada program diatas nilai dari atribut action ini adalah “terima.php” yang merupakan alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form.

Tag <input type=”reset” name=”Cancel”/>, berfungsi untuk membuat tombol resetketika

tombol di klik, form data dikembalikan ke keadaan awal sesuai dengan nilai inisial masing-masing. Dan nama pada tombol tersebut adalah cancel.

Tag <input type=”submit” value=”Send”/>, berfungsi untuk membuat tombol kirim, ketika

tombol di klik, form data yang telah dimasukkanakan dikirim sesuai dengan nilai inisial masing-masing ke form action url. Dan nama pada tombol tersebut adalah send.

Atribut typeIni akan menentukan jenis control yang akan digunakan. Nilai textpada atribut typekontrol ini digunakan untuk menggumpulkan satu baris tunggal dari tulisan.[4]

Tag textareaini digunakan untuk mengetikkan banyak baris. Contohnya seperti kolom komentar atau alamat.

Tag <select></ select> menandai awal dan akhir dari data dalam suatu listbox atau suatu drop-down selection list.Pada sorce code program diatas atribut untuk elemen select adalah elemen

optionyang berfungsi untuk membentuk masing-masing pilihan dalam textbox atau listbox. Dan atribut dari elemen option yang digunakan adalah value, valueini mengembalikan nilai dari elemen yang terpilih.[4]

Tag radiofungsinya menyerupai checkbox control, tetapi hanya satu option button dari group yang dapat dipilih setiap saat. Pilihan bernilai true atau false yang dipilih berarti bernilai

(29)

21

1. Fungsi for pada tanggal lahir adalah <?php for($i=1; $i<=31; $i++){echo”<option

value=$i>$i</option>”;} ?>, yang didalamnya terdapat perulangan for. Didalam for

terdapat nilai ($i=1; $i<=31;$i++) maksudnya adalah apabila $i=1, $i<=31 dan $i++ maka dia akan berulang terus dan bertambah 1 hingga angkanya samadengan 31. Setelah itu terdapat perintah echo”<option value=$i>$i</option>”, artinya nilai pada

option/pilihannya nanti adalah angka yang dihasilkan dari perulangan for.

2. Fungsi for pada bulan lahir adalah <?php

$bulanlahir=array(”January”,”February”,”March”,”April”,”May”,”June”,”July”,”August”, ”September”,”October”,”November”,”December”);for($j=0;$j<12; $j++){ echo”<option value=$bulanlahir[$j]>$bulanlahir[$j]</option>”;}?>, untuk string maka harus menggunakan array maka semua bulan harus dibuat menjadi array terlebih dahulu, setelah itu baru membuat rumus perulangannya. Perlu diingat bahwa indeks array dimulai dari 0 maka jangan mulai hitung dari 1, didalam perulangan for terdapat nilai ($j=0; $j<12; $j++) maksudnya adalah apabila $j=0, $j<12, dan $j++ maka dia akan berulang terus dan bertambah 1 hingga angkanya kurang dari 12. Lalu terdapat perintah echo”<option

value=$bulanlahir[$j]>$bulanlahir[$j] </option>”, maka yang tampil adalah nama bulan yang kita pilih sesuai dengan indeksnya.

3. Fungsi for pada tahun lahir adalah <?php for($i=1992; $i<=2000; $i++){echo”<option

value=$i>$i</option>”;} ?>, yang didalamnya terdapat perulangan for. Didalam for

terdapat nilai ($i=1992; $i<=2000;$i++) maksudnya adalah apabila $i=1992, $i<=2000 dan $i++ maka dia akan berulang terus dan bertambah 1 hingga angkanya sama dengan 2000. Setelah itu terdapat perintah echo”<option value=$i>$i</option>”, artinya nilai pada option/pilihannya nanti adalah angka yang dihasilkan dari perulangan for.

3.6. Source Code HTML dan PHP Untuk Membuat Hasil Input dari FORM

(30)

22

Modul Program 3.1.Source Code HTML dan PHP Untuk Membuat Hasil Input dari FORM

Modul Program3.2.Lanjutan Source CodeHTML dan PHP Untuk Membuat Hasil Inputdari FORM

Pembahasan Modul program 3.1. sampai modul program 3.2. Lanjutan Source Code

HTMLHTML dan PHP Untuk Membuat Hasil Input dari FORM adalah sebagai berikut:

Pada source code program diatas terdapat kode php adalah <?php $a=POST_[‘name’];

echo “$a”;?>, maksudnya adalah variabel a sama dengan name berarti untuk perintah echo

“$a” maka akan memanggil namepada kolom nama. Sehingga pada kolom nama akan berisikan teks atau karakter yang telah dikirimkan sebelumnya. Hal ini juga berlaku sama seperti pada source code program diatas yang memiliki kode PHP, diantaranya yaitu :

a. <?php $b=POST_[‘nim’]; echo “$b”;?>

b. <?php $c=POST_[‘alamat’]; echo “$c”;?>

c. <?php $d=POST_[‘agama’]; echo “$d”;?>

(31)

23

d. <?php $e=POST_[‘tanggallahir’]; echo “$e”;?>

e. <?php $f=POST_[‘bulanlahir’]; echo “$f”;?>

f. <?php $g=POST_[‘tahunlahir’]; echo “$g”;?>

g. <?php $h=POST_[‘jk’]; echo “$h”;?>

Setiapvariabel harus diawali dengan tanda dolar "$" dan dapat dipanggil kapanpun dalam halaman yang sama.[3]

Berikut adalah hasil output programnya :

Gambar 3.1.Output program dari Source Code HTML dan PHP Untuk Membuat FORM

(32)

24

3.7. Source Code HTML Untuk Membuat Program Perulangan Menggunakan FOR

Modul Program 3.1.Source Code HTML Untuk Membuat Program Perulangan Menggunakan FOR

Pembahasan Modul Program 3.1.Source Code HTML Untuk Membuat Program Perulangan Menggunakan FOR adalah :

Tag <form method="post" action="terima.php" ></form>, berfungsi untuk membuat sebuah form, dimana atribut method berfungsi untuk menjelaskan bagaimana data isian

formakan dikirim oleh web browser. Nilai dari atribut method ini bisa berupa get atau post. Kemudian atributaction, yang berfungsi untuk menjelaskan kemana data form akan dikirimkan. Pada program diatas nilai dari atribut action ini adalah “terima.php” yang merupakan alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form. Dan fungsi tag selebihnya sama seperti modul program sebelumnya.

3.8. Source Code HTML danPHP Untuk Membuat Hasil Perulangan Menggunakan

FOR

Modul Program 3.1.Source Code HTML dan PHP Untuk Membuat Hasil Perulangan Menggunakan FOR

<tr><td><input type=”text” name=”awal”/></td></tr> <tr><td>Masukkan Nilai Kondisi Akhir</td></tr> <tr><td><input type=”text” name=”akhir”/></td></tr> <tr><td>Masukkan Sebuah Karakter</td></tr>

(33)

25

Modul Program 3.2.Lanjutan Source Code HTML dan PHP Untuk Membuat Hasil Perulangan Menggunakan FOR

Pembahasan Modul Program 3.1. sampai 3.2. Source Code HTML dan PHP Untuk Membuat Hasil Perulangan Menggunakan FORadalah :

Pada source code program diatas terdapat kode php adalah <?php $a=POST_[‘awal’];

echo “$a”;?>, maksudnya adalah variabel a sama dengan awal berarti untuk perintah echo

“$a” maka akan memanggil awal pada kolom nama. Sehingga pada kolom nama akan berisikan teks atau karakter yang telah dikirimkan sebelumnya. Hal ini juga berlaku sama seperti pada source code program diatas yang memiliki kode php, diantaranya yaitu :

1. <?php $b=POST_[‘akhir’]; echo “$b”;?>

2. <?php $c=POST_[‘karakter’]; echo “$c”;?>

Setiapvariabel harus diawali dengan tanda dolar "$" dan dapat dipanggil kapanpun dalam halaman yang sama. [3]

Selanjutnya source code program untuk menghasilkan perulangan karakternya adalah <?php if ($a<$b), maksudnya adalah jika nilai awal kurang dari nilai akhir maka rumus perulangannya adalah for ($i=$a; $i<=$b; $i++) dan didalam rumus for yang pertama dimasukkan rumus for ($j=$a; $j<=$i; $j++). Lalu terdapaat perintah echo”$c” fungsinya untuk menuliskan karakter perulangan, dan echo”<br/>” fungsinya untuk membuat baris

(34)

26

baru.elseif($a>$b), maksudnya adalah jika nilai awal lebih dari nilai akhir maka rumus perulangannya adalah for($i=$a; $i>=$b; $i--) dan didalam rumus for yang pertama dimasukkan rumusfor($j=$b; $j<=$i; $j++). Kemudian terdapat perintah echo”$c” fungsinya

untuk menuliskan karakter perulangan, dan echo”<br/>” fungsinya untuk membuat baris baru.

Berikut adalah hasil output program yang berjenis ascending(nilai awal lebih kecil daripada kondisi akhir) :

Gambar 3.1.Output program dari Source Code HTML Untuk Membuat Program Perulangan Menggunakan FOR

(35)

27

Berikutadalah hasil output program yang berjenis descending(nilai awal lebih besar daripada kondisi akhir) :

Gambar 3.2.Lanjutanoutput program dari Source Code HTML dan PHP untuk membuat perulangan menggunakan for

(36)

28

BAB IV PENUTUP 4.1.Kesimpulan

HTML lebih dikenal sebagai standar bahasa untuk membuat dokumen web. Sesungguhnya

Hypertext Markup Language (HTML) justru tidak dibuat untuk mempublikasikan informasi di web, namun oleh karena kesederhanaan serta kemudahan penggunaanya, HTML kemudian dipilih orang untuk mendistribusikan informasi di web.

File HTML sebenarnya adalah file teks biasa yang selain berisi informasi yang hendak ditampilkan kepada pengguna, juga mempunyai perintah-perintah untuk mengatur tampilan data tersebut. Browserlah yang memiliki kuasa penuh dalam menterjemahkan perintah-perintah tadi.

Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen.Untuk meberikan style pada header, sidebar, content, maupun footer, pendeklarasian desain dapat dituliskan pada file css, sehingga lebih mudah untuk memahami alur pembuatan halam web.

Pendekatan Embedded dilakukan dengan meletakkan properti style di dalam satu blok di dokumen HTML. Pendekatan Inline dilakukan dengan meletakkan properti style secara langsung per baris atau per elemen HTML. Pendekatan Linked dilakukan dengan meletakkan properti style di file berekstensi css dan dikaitkan dengan dokumen HTML( file css dan html dipisah menjadi 2 file berbeda).

Untuk mendesain layout dengan margin padding, border dapat diatur sesuai dengan keinginan, satuan untuk penggunaan margin, padding, border adalah px. Untuk meletakkan suatu box dapat menggunakan float. Float berfungsi meletakkan objek sesuai dengan arah yang diinginkan , left/right. Untuk mereset letak box dapat menggunakan fungsi clear right/left/both.

PHP(PHP. Hypertext Preprocessor) merupakan salah-satu bahasa web-scripting

(37)

29 a. Ditulis diantara tag berikut :

1. <? Konten ?> 2. <?php konten ?>

3. <script language”php”> konten </script > 4. <% konten %>

b. Setiap statment diakhiri dengan tanda titik-koma (;)

c. Case sensitive untuk nama identifier yang yang dibuat oleh user (variabel, konstanta, fungsi, dll), namun tidak case sensitive untuk identifier built-in dari PHP, misal :

1. ECHO = echo 2. WHILE = while

Penggunaan kondisi dan perulangan dalam Struktur Kontrol sangat bermanfaat dalam pengelolahan data serta menghemat waktu. Pernyataan kondisi menunjukkan pilihan data dimana process ini membantu dalam process penggambilan keputusan yang melibatkan banyak alternatif. Sedangkan penggunaan pernyataan perulanggan tidak jauh beda dari pernyataan kondisi, hanya saja yang membedakannya terletak pada penggunaan while, for dan do – while.

4.2.Saran

Saran yang berkaitan dengan laporan praktikum ini adalah :

1. Dalam penulisan kode-kode HTML untuk membuat web diperlukan ketelitian agar tidak terjadi kesalahan sehingga harus diperlukan perbaikan dari awal.

2. Untuk membuat halaman web yang rapi dan menarik, perlu melakukan pemformatan tulisan-tulisan, baik tata cara pencetakannya, serta jenis tulisan yang dipergunakan.

3. Penggunaan warna adalah cara terbaik untuk membuat situs web tetapi jangan terlalu berlebihan. Komposisi warna, tulisan dan gambar yang seimbang (tampilan yang bagus). 4. Cara pembuatan HTML file perlu diperhatikan supaya search engine seperti Google

(38)

30

DAFTAR PUSTAKA

[1] Putra, Agung. (2013, January) -. [Online].

http://agungputraad.blogspot.co.id/2013/01/laporan-penulisan-ilmiah-pemrograman.html

[2] Ramadana , Darmawan. (2014, may) -. [Online].

http://www.slideshare.net/kunidar/laporan-pemrograman-berbasis-web-tugas-4-cascading-style-sheets?from_action=save

[3] Pujiono , Nanda. (2015, January) -. [Online].

http://www.slideshare.net/nandaMochill/cara-membuat-web

[4] Budi, M. Wahid Setia. (2013, March) -. [Online].

https://programwahid.blogspot.co.id/2013/03/dasar-pemrograman-web-dengan-html.html

[5] Me, Hikary Is. (2014, -) [Online]. http://emynurc.blogspot.co.id/2014/10/laporan-praktikum-pemrograman-web.html

[6] Natanael. (2015, May) -. [Online]. http://natanael.ilearning.me/2015/05/03/pengertian-sistem-operasi-windows-sistem-operasi/