Otodidak Desain dan Pemrograman Website

Transkripsi

1

2 Otodidak Desain dan Pemrograman Website

3 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 Rp (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 Rp ,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 Rp ,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 Rp ,00 (empat miliar rupiah).

4 Otodidak Desain dan Pemrograman Website Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO

5 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 ISBN: 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

6 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 v

7 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 Panel Properties Preview in Browser Dasar-Dasar HTML Membuat Dokumen HTML Baru Mengenal Struktur HTML Tag DTD atau DOCTYPE Tag HTML Tag HEAD Tag <body> Membuat Paragraf Baru Menggunakan Break Tag untuk Menebalkan dan Memiringkan Teks Heading Membuat List Ordered List Unordered List Style untuk List Melanjutkan Ordered List yang Sudah Telanjur Diselesaikan Menyisipkan Point-Point Baru Karakter Spesial Mengatur Warna Background dan Teks Menggunakan Gambar/Foto sebagai Background Menulis Teks di dalam Sebuah Halaman Web Dua Jenis Teks di dalam Dunia Website Menggunakan Perataan Paragraf Menyeleksi Teks Lebih Lengkap dalam Menyeleksi Teks Copy, Cut, dan Paste vii

8 Menggunakan Font Memilih Default Font Mengenal Browser Safe Font Mengenal Klasifikasi Font Mengatur Ukuran Font Mengganti Warna Font Memasukkan Tanggal pada Hari Ini Agar Tanggal Selalu Ter-Update Memindahkan Teks Tanpa Cut-Paste Copy Paste Hanya Teks Saja Mencari Teks di dalam Desain Website Mencari Teks dan Menggantinya dengan yang Lain File dan Link Menyimpan File Panel Files Membuka File Membuat Folder Membuat Link Atribut Target Bekerja dengan Foto / Gambar Memasukkan Foto/Gambar Width dan Height Alt Link pada Foto/Gambar Membuat Tabel Membuat Tabel Menggunakan Dreamweaver Mengatur Ukuran Tabel Border Menggabung Beberapa sel Form dalam Website Langkah-Langkah Memasukkan Form ke dalam Halaman Website Properties untuk Form Action Method Meletakkan Text ke dalam Form Menentukan Panjang Text Membatasi Jumlah Karakter Value Password Field Text Area Rows dan Cols Wrap Check Box Checked Radio Button viii

9 Select List Values Memilih Option yang Muncul Pertama Kali File Field Tombol-Tombol Form Mengganti Teks di Atas Kedua Tombol Tersebut Form dalam HTML Datalist Fieldset Keygen Meter Output Progress Mengenal Atribut-Atribut Baru dalam Tiap Elemen Form Autofocus Pattern Placeholder Required Form Baru yang Berasal dari Tag Input Color Date Datetime Datetime-local Time Month Week Number Range Search Tel url Form dalam PHP Membuat Form Membuat File PHP Pengujian HTML dan PHP Menulis Kode HTML dan PHP Cara Cara CSS Konsep Dasar CSS Local Styles ID dan Class Metode Peletakan Style Rahasia Memilih Warna ix

10 Memilih Warna Berdasarkan Hexadecimal Mengedit Teks Menggunakan CSS Atribut-Atribut yang Bisa Digunakan untuk Mengedit Bentuk Teks Membuat Border Menggunakan CSS Menggunakan CSS untuk Memasang Foto Latar Belakang Menggunakan Floating Position Menggunakan Float Menggunakan Absolute Position Fitur-Fitur Baru di CSS Menyeleksi Attribute Not nth-child Bekerja dengan Menggunakan Font Membuat Kolom Membuat Garis Tepi pada Teks Membuat Bayangan pada Teks Elemen-Elemen Visual di dalam CSS Color Values Membuat Warna Gradasi Tentang Penulis x

11 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 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. 1

12 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 untuk PHP 7, seperti ditunjukkan pada gambar di bawah ini. Download XAMPP 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 2

13 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 3

14 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. 4

15 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. 5