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

Posting Komentar

Postingan populer dari blog ini

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

-
Gambar
Toko online LADANG BAJU bermaksud membuat sistem Basis Data untuk menangani Sistem Informasi penjualan barangnya. Di toko online itu memiliki 2 kategori barang yaitu (1) Barang (2) Makanan dengan atribut: kd_kat dan nm_kat. Seorang pelanggan dapat membeli barang lebih dari satu dalam satu kategori, tetapi tidak bisa memesan banyak barang dengan banyak kategori. Di tiap – tiap kategori memiliki barang yang didalamnya sesuai dengan kategorinya. Dimana isi dai entitas barang yaitu: kd_brg, nm_brg, hrg_brg, kd_kat. Sementara itu pelanggan (kd_pel, nm_pel, almt_pel, no_telp) dapat memesan dengan mengisi tabel order  copyrighted : anggak (kd_tran, kd_brg, kd_pel, jml, hrg_byr) dimana kd_brg, kd_pel dan jml di isi manual oleh pelanggan. Tugas: 1. Identifikasi dan tentukan entitas-entitas yang terlibat dalam sistem tersebut 2. Lengkapi(apabila diperlukan) dengan atribut untuk setiap entitas 3. Tentukan Hubungan/Relasinya 4. Tentukan Kardinalitasnya 5. Tentukan PK dan FK nya 6. Bu...
Baca selengkapnya

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

-
Gambar
Unified Modeling Language  adalah sebuah bahasa yang berdasarkan grafik/gambar untuk visualisasi, menspesifikasikan, membangun, dan pendokumentasian dari sebuah sistem pengembangan perangkat lunak berbasis OOP ( Object-Oriented Programming ). Dalam hal ini,  Unified Modeling Language  (UML) bukanlah merupakan bahasa pemprograman tetapi model-model yang tercipta berhubungan langsung dengan berbagai macam bahasa pemrograman, sehingga memungkinkan melakukan pemetaan  (mapping)  langsung dari model-model yang dibuat dengan  Unified Modeling Language  (UML)   dengan bahasa-bahasa pemprograman berorientasi objek seperti  Java, Borland Delphi, Visual Basic, C++,  dan lain-lain . Berikut beberapa penjelasan simbol diagram yang terdapat pada UML. A. Use Case Diagram B. Activity Diagram  C. Sequence Diagram D. Class Diagram E. State Chart F.  Kolaborasi Diagram Oke, mungkin cukup yang dapat...
Baca selengkapnya

Aplikasi Coding Web Terbaik Gratis- Belajar Pemrograman Web

-
Gambar
Halo kawan, kalian pasti penasaran dengan pemrograman web, apa sih pemrograman web itu. sebelum masuk kesana pertama kita perlu mengenal dulu alat alat yang harus di gunakan untuk memulai mengkodekan program, karena ga mungkin kan kita ngebuat program tanpa sebuah aplikasi hehe  langsung aja,  berikut ini adalah aplikasi coding web kesukaan saya : 1. Brackets Brackets yaitu aplikasi  open-source (gratis dan bebas di gunakan)  yang dimulai oleh Adobe patut untuk dicoba. Aplikasi ini tersedia untuk Windows, Linux, dan Mac OS X. Brackets merupakan aplikasi  code editor  yang berfokus pada HTML, CSS, dan Javascript. selain aplikasi ini lumayan ringan, design ya pun simple dan terlihat seperti material design, mengapa saya sangat memfavoritkan aplikasi ini? aplikasi ini sangatlah responsif dan lancar, selain itu ada banyak fitur di dalam nya diantaranya kita dapat merubah tema Dark/ Light, enaknya aplikasi ini, saat kita akan mendeklarasikan sebuah perin...
Baca selengkapnya