Laporan 2 : Membuat Desain Web Responsive


Membuat Desain Web Responsive
A. Tujuan
- Membuat form login di lengkapi username & password
- Menerapkan syntax css desain web responsive kedalam html


B. Konsep Dasar
Desain Web Responsif (bahasa Inggris:Responsive Web Design (RWD)) adalah sebuah metode atau pendekatan sistem web desain yang bertujuan memberikan pengalaman berselancar yang optimal dalam berbagai perangkat, baik mobile maupun komputer meja.


 PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memprogram situs web dinamis

C. Langkah Kerja
Agar program PHP, dapat berjalan di dalam browser, Program PHP harus di hosting kedalam localhost, atau memakai aplikasi XAMPP. apabila aplikasi XAMPP Telah diinstal maka kita dapat menyimpan/membuat program PHP kedalam folder C/xampp/htdoc/(buat folder baru bernama "lapel", jangan lupa di dalam aplikasi XAMPP, Klik Start pada option (Apache , dan MySql)
1. Buatlah file di dalam folder lapel seperti dibawah ini

2. Dalam file blog.php masukan syntax dibawah ini :





 3. Didalam file index.php masukan syntax di bawah ini :



 3. Dalam file logout.php masukan syntax berikut ini :


4. Dalam file style.css masukan syntax berikut ini 




Maka hasil dari koding di atas akan menjadi seperti ini :




Tampilan Web index.php  dan blog.php akan responsive, terlihat apabila kita mengecilkan size windows ke ukuran yang relatif kecil, maka halaman web pun akan menyesuaikan ukurannya

D. Kesimpulan
Tampilan web diatas merupakan contoh menerapkan desain web responsivie, hal ini berguna agar halaman web yang kita akses akan mudah untuk di akses dari berbagai platform berbagai ukuran. karena ukurannya sudah tersetting didalam file stye.css . semoga bermanfaat

E.Daftar Pustaka
Referensi Konsep Dasar, www.google.com;
Referensi Konsep dasar https://id.wikipedia.org/wiki/Desain_web_responsif.

Komentar

Postingan populer dari blog ini

Studi Kasus : Basis Data Toko Online Ladang Baju Oleh Angga Kahaerul

Penjelasan Simbol UML Diagram : Use Case, Activity, Sequence, Class, State Chart, Kolaborasi.

Aplikasi Coding Web Terbaik Gratis- Belajar Pemrograman Web