Otodidak Desain dan Pemrograman Website

Sanksi Pelanggaran Pasal 113 Undang-Undang Nomor 28 Tahun 2014 tentang Hak Cipta

1. Setiap Orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf i untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 1 (satu) tahun dan/atau pidana denda paling banyak Rp100.000.000 (seratus juta rupiah).

2. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf c, huruf d, huruf f, dan/atau huruf h untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 3 (tiga) tahun dan/atau pidana denda paling banyak Rp500.000.000,00 (lima ratus juta rupiah).

3. Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf a, huruf b, huruf e, dan/atau huruf g untuk Penggunaan Secara Komersial dipidana dengan pidana penjara paling lama 4 (empat) tahun dan/atau pidana denda paling banyak Rp1.000.000.000,00 (satu miliar rupiah).

4. Setiap Orang yang memenuhi unsur sebagaimana dimaksud pada ayat (3) yang dilakukan dalam bentuk pembajakan, dipidana dengan pidana penjara paling lama 10 (sepuluh) tahun dan/atau pidana denda paling banyak Rp4.000.000.000,00 (empat miliar rupiah).

 

Otodidak Desain dan Pemrograman Website

Jubilee Enterprise

PENERBIT PT ELEX MEDIA KOMPUTINDO

Otodidak Desain dan Pemrograman Website

Jubilee Enterprise

©2017, PT. Elex Media Komputindo, Jakarta Hak cipta dilindungi undang-undang Diterbitkan pertama kali oleh Penerbit PT Elex Media Komputindo Kelompok Gramedia, Anggota IKAPI, Jakarta 2017

okti@elexmedia.id

717051208

ISBN: 978-602-04-3382-0

Dilarang keras menerjemahkan, memfotokopi, atau memperbanyak sebagian atau seluruh isi buku tanpa izin tertulis dari penerbit.

Dicetak oleh Percetakan PT. Gramedia, Jakarta Isi di luar tanggung jawab percetakan

v

Kata Pengantar

Pemrograman dan desain website merupakan topik populer yang akan terus berkembang di masa mendatang. Rasa optimisme terhadap perkembangan website ini muncul akibat semakin banyaknya uang mengalir di sektor ini, baik dari sisi perdagangan maupun jasa.

Oleh karena itu, Jubilee membahas topik pemrograman dan desain website untuk pasar pemula yang mengombinasikan antara Dreamweaver, PHP, CSS, dan HTML sekaligus. Memang buku ini belum cukup karena dunia website sangat luas. Disarankan setelah membaca buku ini, Anda membaca juga pustaka lainnya yang mengupas secara lebih detail topik-topik spesifik seperti bahasa pemrograman dan desain grafis.

Akhir kata, semoga buku ini bermanfaat dan dapat membantu Anda mengenal dunia pemrograman dan desain website secara cepat dan mudah.

Selamat berkarya!

Yogyakarta, 1 Mei 2017 Jubilee Enterprise “We Make Bestseller Book” Thinkjubilee.com

vii

Daftar Isi

Kata Pengantar...........................................................................v

Daftar Isi ................................................................................... vii

1 Site Setup.................................................................................1 Mengintegrasikan Dreamweaver dan PHP ............................................................. 1

Menjalankan XAMPP..................................................................................... 3 Membuat Project Situs Baru.................................................................................. 4 Membuat File PHP .............................................................................................. 7 Mode Code, Design, Split ................................................................................. 11 Panel Properties................................................................................................ 11 Preview in Browser ........................................................................................... 12

2 Dasar-Dasar HTML................................................................. 13 Membuat Dokumen HTML Baru .......................................................................... 14 Mengenal Struktur HTML.................................................................................... 15

Tag DTD atau DOCTYPE.............................................................................. 15 Tag HTML .................................................................................................. 16 Tag HEAD.................................................................................................. 16 Tag <body>............................................................................................... 17

Membuat Paragraf Baru .................................................................................... 17 Menggunakan Break......................................................................................... 17 Tag untuk Menebalkan dan Memiringkan Teks..................................................... 18 Heading .......................................................................................................... 19 Membuat List.................................................................................................... 20

Ordered List ............................................................................................... 20 Unordered List ............................................................................................ 21 Style untuk List ............................................................................................ 21 Melanjutkan Ordered List yang Sudah Telanjur Diselesaikan ............................ 24 Menyisipkan Point-Point Baru........................................................................ 24

Karakter Spesial ............................................................................................... 24 Mengatur Warna Background dan Teks .............................................................. 25

Menggunakan Gambar/Foto sebagai Background ......................................... 27 Menulis Teks di dalam Sebuah Halaman Web ..................................................... 28

Dua Jenis Teks di dalam Dunia Website ........................................................ 29 Menggunakan Perataan Paragraf ....................................................................... 30 Menyeleksi Teks ............................................................................................... 30

Lebih Lengkap dalam Menyeleksi Teks........................................................... 31 Copy, Cut, dan Paste .................................................................................. 31

viii

Menggunakan Font........................................................................................... 32 Memilih Default Font ................................................................................... 33 Mengenal Browser Safe Font........................................................................ 34 Mengenal Klasifikasi Font ............................................................................ 35 Mengatur Ukuran Font................................................................................. 36 Mengganti Warna Font ............................................................................... 37

Memasukkan Tanggal pada Hari Ini ................................................................... 38 Agar Tanggal Selalu Ter-Update ................................................................... 39

Memindahkan Teks Tanpa Cut-Paste ................................................................... 39 Copy Paste Hanya Teks Saja ............................................................................. 40 Mencari Teks di dalam Desain Website .............................................................. 41

Mencari Teks dan Menggantinya dengan yang Lain ....................................... 42

3 File dan Link.......................................................................... 43 Menyimpan File................................................................................................ 43 Panel Files ....................................................................................................... 44

Membuka File............................................................................................. 45 Membuat Folder ......................................................................................... 45

Membuat Link................................................................................................... 46 Atribut Target ............................................................................................. 47

4 Bekerja dengan Foto / Gambar............................................. 49 Memasukkan Foto/Gambar............................................................................... 50 Width dan Height............................................................................................. 51 Alt .................................................................................................................. 52 Link pada Foto/Gambar.................................................................................... 52

5 Membuat Tabel ..................................................................... 53 Membuat Tabel Menggunakan Dreamweaver ...................................................... 54 Mengatur Ukuran Tabel..................................................................................... 55 Border............................................................................................................. 56 Menggabung Beberapa sel................................................................................ 57

6 Form dalam Website ............................................................. 59 Langkah-Langkah Memasukkan Form ke dalam Halaman Website.......................... 59 Properties untuk Form ........................................................................................ 60 Action ............................................................................................................. 61 Method ........................................................................................................... 61 Meletakkan Text ke dalam Form ......................................................................... 62

Menentukan Panjang Text ............................................................................ 62 Membatasi Jumlah Karakter ......................................................................... 63 Value ........................................................................................................ 64

Password Field ................................................................................................. 64 Text Area......................................................................................................... 65

Rows dan Cols ........................................................................................... 66 Wrap ........................................................................................................ 66

Check Box ....................................................................................................... 67 Checked .................................................................................................... 68

Radio Button .................................................................................................... 68

ix

Select .............................................................................................................. 70 List Values .................................................................................................. 71 Memilih Option yang Muncul Pertama Kali .................................................... 72

File Field.......................................................................................................... 72 Tombol-Tombol Form......................................................................................... 73

Mengganti Teks di Atas Kedua Tombol Tersebut ............................................. 74 Form dalam HTML5 .......................................................................................... 74

Datalist ...................................................................................................... 74 Fieldset ...................................................................................................... 75 Keygen...................................................................................................... 75 Meter ........................................................................................................ 76 Output....................................................................................................... 76 Progress..................................................................................................... 77

Mengenal Atribut-Atribut Baru dalam Tiap Elemen Form ........................................ 77 Autofocus................................................................................................... 77 Pattern....................................................................................................... 78 Placeholder ................................................................................................ 78 Required.................................................................................................... 79

Form Baru yang Berasal dari Tag Input ............................................................... 79 Color......................................................................................................... 79 Date.......................................................................................................... 79 Datetime .................................................................................................... 80 Datetime-local............................................................................................. 81 Time.......................................................................................................... 81 Month ....................................................................................................... 81 Week ........................................................................................................ 81 Email......................................................................................................... 82 Number ..................................................................................................... 82 Range ....................................................................................................... 83 Search....................................................................................................... 83 Tel ............................................................................................................ 84 url ............................................................................................................. 84

7 Form dalam PHP ................................................................... 85 Membuat Form................................................................................................. 85 Membuat File PHP ............................................................................................ 89 Pengujian ........................................................................................................ 91

8 HTML dan PHP....................................................................... 93 Menulis Kode HTML dan PHP............................................................................. 93

Cara 1 ...................................................................................................... 94 Cara 2 ...................................................................................................... 94

9 CSS........................................................................................ 97 Konsep Dasar CSS ........................................................................................... 97

Local Styles .............................................................................................. 100 ID dan Class ............................................................................................ 101

Metode Peletakan Style ................................................................................... 103 Rahasia Memilih Warna.................................................................................. 104

x

Memilih Warna Berdasarkan Hexadecimal.................................................. 105 Mengedit Teks Menggunakan CSS ................................................................... 105

Atribut-Atribut yang Bisa Digunakan untuk Mengedit Bentuk Teks.................... 108 Membuat Border Menggunakan CSS ................................................................ 109 Menggunakan CSS untuk Memasang Foto Latar Belakang................................... 111 Menggunakan Floating Position........................................................................ 113

Menggunakan Float .................................................................................. 116 Menggunakan Absolute Position ................................................................. 117

Fitur-Fitur Baru di CSS3 ................................................................................... 118 Menyeleksi Attribute .................................................................................. 118 Not ......................................................................................................... 119 nth-child................................................................................................... 119

Bekerja dengan Menggunakan Font ................................................................. 122 @font-face ................................................................................................ 122 Membuat Kolom ....................................................................................... 124 Membuat Garis Tepi pada Teks.................................................................. 126 Membuat Bayangan pada Teks .................................................................. 127

Elemen-Elemen Visual di dalam CSS ................................................................. 128 Color Values ............................................................................................ 128 Membuat Warna Gradasi ......................................................................... 129

Tentang Penulis .......................................................................133

1

1 Site Setup

Desain website merupakan salah satu bidang yang akan selalu diminati seiring semakin banyak masyarakat dunia yang tersambung dengan jaringan internet. Oleh karena itu, pemrograman dan desain website menjadi salah satu ilmu yang wajib dikuasai. Desain website sendiri menarik untuk dipelajari karena memiliki keunikan. Salah satu keunikan tersebut terletak pada bagaimana sebuah situs didesain dari awal hingga akhir. Seperti telah kita ketahui, sebuah website dibangun menggunakan dua pendekatan, yaitu desain dan pemrograman. Lantas, dari manakah sebaiknya kita mulai belajar membuat website? Buku ini membantu Anda memiliki gambaran singkat bagaimana sebuah website dibuat dengan metode desain maupun pemrograman. Untuk membantu Anda belajar, buku ini membahas software yang paling populer untuk membangun website, baik dengan cara desain maupun pemrograman, yaitu Adobe Dreamweaver. Versi yang digunakan di dalam buku ini adalah Dreamweaver CC 2017. Mengintegrasikan Dreamweaver dan PHP Jika Anda memiliki rencana untuk membuat situs yang dinamis dengan memanfaatkan server side scripting seperti PHP maka Site Setup menjadi lebih penting lagi untuk dipelajari terlebih dulu. Ini karena Anda bisa mengatur penggunaan server PHP, seperti Apache atau XAMPP agar dapat bekerja sama dengan Dreamweaver. Pertama-tama, Anda harus memiliki XAMPP terlebih dulu. Proses memiliki XAMPP tidaklah sulit karena sumber daya yang dibutuhkan tersedia gratis.

2

XAMPP versi terbaru sudah mendukung penggunaan PHP 7. Agar Anda bisa mengunduh, silakan gunakan QR Code di bawah ini.

DOWNLOAD SOFTWARE

Download XAMPP 7 dengan memotret QR Code di samping kiri.

Ada beberapa pilihan versi XAMPP. Unduh XAMPP versi 7.0.13 untuk PHP 7, seperti ditunjukkan pada gambar di bawah ini.

Download XAMPP 7.0.13 yang telah mendukung PHP 7 Setelah proses pengunduhan selesai, Anda bisa mulai menginstal XAMPP. Tidak ada setting khusus yang perlu dilakukan pada saat instalasi, kecuali pada pemilihan folder disarankan diletakkan pada folder C:\xampp.

Disarankan menginstal di folder C:\xampp

3

Tunggu hingga proses instalasi selesai dilakukan dan Anda siap untuk mempelajari PHP. Menjalankan XAMPP Di beberapa bab dalam buku ini akan dikupas topik seputar PHP. Nah, pada saat pengujian halaman website yang dibangun menggunakan PHP, Anda wajib mengaktifkan XAMPP yang baru saja diinstal itu. Berikut langkah-langkah konkrit untuk membuat tulisan “Halo Dunia” di dalam website. 1. Klik ikon Search pada MS Windows dan ketik XAMPP. 2. Lalu, pilih XAMPP Control Panel.

Pilih XAMPP Control Panel 3. Pada XAMPP Control Panel, tekan tombol Start pada pilihan Apache.

Tekan tombol Start untuk memulai Apache

4

Ingat, langkah-langkah mengaktifkan XAMPP di atas hanya digunakan saat Anda bekerja dengan file PHP. Jika tidak, Anda tidak perlu menjalankan XAMPP untuk menghemat sumber daya komputer. Begitu pun pada saat Anda keluar dari Dreamweaver, XAMPP bisa dinonaktifkan dengan menekan tombol Stop. Membuat Project Situs Baru Pembuatan website yang lengkap membutuhkan banyak file, seperti file HTML, PHP, dan berbagai aset pendukung, seperti file gambar, video, dan sebagainya. Karena berurusan dengan berbagai jenis file maka proses awal pembuatan website adalah dengan mendefinisikan project baru. Dengan menggunakan Dreamweaver, proses pembuatan project baru cukuplah mudah. Berikut langkah-langkahnya. 1. Pilih ikon Site Setup.

Memilih Site Setup 2. Pastikan menu Site dalam kondisi aktif. Di dalam textbox Site Name, tulis nama situs yang ingin dibuat, misalnya Situs Pribadi. 3. Pada textbox Local Site Folder, pilih salah satu folder yang ada di dalam folder C:\xampp\htdocs. Jika belum ada folder yang Anda buat untuk project situs ini, klik ikon dan pada kotak dialog Choose Root Folder, klik ikon New Folder lalu buat folder baru, misalnya dreamweaver.

5

Buat folder baru (misalnya folder: dreamweaver) di dalam folder c:\xampp\htdocs untuk menyimpan file-file situs 4. Tekan tombol Select Folder.

Pengaturan nama situs dan letak folder tempat file-file disimpan 5. Klik menu Servers. 6. Selanjutnya, klik ikon + (Add New Server) untuk menambah server ke dalam project situs ini.