Rabu, 28 April 2021

(Tugas UTS) Web Pemrograman

 Web Pemrograman

Alamat Web : https://yusrilhm.000webhostapp.com/

Deskripsi Web : disini saya membuat website dengan tema web interaktif, yang menjelaskan tentang pengertian dari macam2 bahasa pemrograman, mulai dari php, java script, php, ruby dan pyhton.


Fitur dan cara pembuatan :

1. Pada bagian <head> saya menambahkan beberapa meta dan tag < link> untuk menghubungkan kode cssnya, disini nama file css saya stylee.css


Berikut penjelasan dari beberapa meta yang saya tambahkan :

- <meta charset> untuk menyatakan encoding dari web atau dengan coding apa website dibuat disini saya menggunkan encoding UTF-8

- <meta name="viewport"> untuk mengatur tampilan web pada saat dibuka di device yang berbeda misalkan pada saat dibuka di browser laptop maka ukurannya akan besar jika dibuka di hp maka ukurannya akan mengecil mengikuti lebar dari layar hp, unutk mengatur lebar halaman agar mengikuti device yang bervariasi saya menambahkan content="widht-device-width",  dan untuk menetapkan tingjat zoom awal halaman saya menambahkan "initial-scale=1.0"

- <meta http-equiv="X-UA=compatible"> untuk menentuan kode html akan dibuka pada internet explorer versi berapa, nilai atribute content="ie-edge" untuk menginstruksikan agar html yang saya buat untuk ditampilkan di internet explorer/browser versi terbaru.


Pada tag <body> saya menambahkan tag <div> yang didalamnya terdapat header, nav, img, p, dan footer. saya juga mengatur tampilan untuk body dengan css agar lebih menarik 


Untuk Layouting saya menggunakan css reset, margin dan padding saya beri 0 untuk menghilangkan jarak antara body dengan browser, box-sizing saya gunakan agar ukuran halaman tetap meskipun didalamnya terdapat div yang memungkinkan bisa merubah ukuran dari boxnya, unutk font-family saya menggunakan arial , agar contentnya berada di dalam box saya menggunakan atribute border-box, lalu pada background-color saya memberi warna gainsboro.


pada badan utama saya menambahkan max-width 1080px untuk mengatur batas lebar elemen dengan ukuran margin 20px, bg-color saya gunakan white, lalu saya menambahkan padding dengan ukuran 20px dan text-align untuk mengatur letak text menjadi menengah dengan atribute center. 

untuk header saya memberikan padding dengan ukuran 20px, lalu bg-color saya beri warna dengan kombinasi rgb 20,0,4, dengan warna text putih dan posisi text berada di tengah, untuk header h2 saya menggunan margin-bottom: 7px dan font-size 35px. 


saya juga menambahkan fitur navigasi untuk memudahkan pembaca memilih materi apa yang ingin dibaca , saya menggunakan <ul> yang di dalamnya terdapat tag <li> dan tag link <a> dengan code seperti di bawah 



saya menambhakan list-style-type: none; untuk menghilangkan tandda pada list, margin dan padding saya beri 0, overflow hidden untuk menyembunyikan atau agar ukuran listnya tidak melebihhi parentsnya, pada li saya menambahkan float dengan letak kiri, pada navigasi li a saya menambahkan display blok.


agar menarik saya membuat li a , hover agar ketika mouse di kearahkan ke link memberi efek transisi, dengan warna merah, dan durasi transisi 1 detik.





saya menambahkan tag image <img> untuk menambahkan gambar pada menu home, dengan display block dan margin left dan right nya auto agar mengikuti ukuran dr layar.


pada isi konten saya menambhakna tag <section> unutk memisahkan setiap materi atau konten dengan mabhkan id sesuai dengan nama judul agar ketika link <a> di navbar di klik maka akan menuju ke konten yang di inginkan, say amembuat judul dengan <h3> dan menambahkan image dengan ukuruan height dan widht menyesuaikan dengan ukuran gambar asli, lalu saya menambahkan tag <p> yang di dalamnya terdapat isi artikel, dan di akhir saya menambahkan tag <a> untuk link ke menu home atau menu utama untuk memudahkan pembaca ketika ingin kembali ke menu utama.






saya menambahkan footer agar tamplian pada akhir atau halaman paling bawah menarik dengan clear both, bg-color black warna text putih padding 15px, text-align center.

jadi tampilan webnya seperti ini :




untuk tampilan android saya memberikan code css seperti dibawah, untuk membedakan tampilan ketika di pc dan di hp

sekian tgas uts saya buat, kurang lebihnya mohon maaf.


Nama : Yusril Hendra Maulana
Kelas : Teknik Informatika A














































































 


di Tidak ada komentar:

Senin, 26 April 2021

(Materi 08) bahasa pemrograman PHP, Pengertian, Fungsi.

 


Bahasa pemrograman

Sebelum kita masuk pada bahasa pemrograman PHP terlebih dahulu kita mengetahui apasih bahasa perograman itu ? Bahasa pemrograman adalah bahasa yang digunakan untuk memberikan program atau instruksi kepada komputer untuk melakukan perintah yang kita igninkan Hal hal yang dihasikan seperti os, aplikasi, web dll.

Lalu apasih Bahasa pemorgraman PHP ?
Bahasa pemrograman PHP adalah suatu bahasa pemrogaman server side scripting yang bersifat open source, yang artinya bahasa pemrograman php berjalan di sisi server.

Mengapa PHP ?
Alasan menggunakan bahasa pemrogaman php yakni karena bahasa perograman php cenderung mudah dipelajari, bersifat open source dan terdapat banyak pilihan database.







Fungsi PHP ?
PHP digunakan untuk pengembangan web di sisi server

Sekian rangkuman dari saya, sekian dan terimkasih !!!

 
di Tidak ada komentar:

Selasa, 13 April 2021

(Materi 07) Bootstrap : pengertian, kekurangan dan kelebihan

 (Materi 07) Bootstrap



Apasih Bootstrap ?
Bootstrap merupakan library front end/framework tapi lebih condong ke library, karena library menggunakan code lain (code yang sudah disiapkan) untuk membuat halaman web.

Setiap framework/ library pasti punya kekurangan dan kelebihannya masing-masing, nah berikut kekuranga dan kelebihan dari bootstrap

Kekurangan :

  • -     Biasanya website yag menggunakan bootsrap banyak yg sama tampilannya antara web 1 dengan yang lain, dengan orang yang sama2 menggunakan bootsrap
  • -   Terbatas pada yang disiapkan (tapi kekurangan ini bisa kita atasi dengan memodifikasi/kita tambahkan dengan code kita) Misal bootsrap tidak memaksa hanya memakai warna yang disediakan saja ,  warna yang disediakan hanya memudahkan bila kita ingin memakai warna yang sama
  • -   Sama seperti framework/library yang lain kode-kode yang tidak kita perlukan akan membuat file kita lebih besar dari seharusny  
        solusi : yang tidak perlu bisa dihapus karena filenya bisa dimodifikasi

Kelebihan :

  • -   Intinya banyak hal yang bisa dibuat dengan menuliskan kode yang sedikit dengan bantuan bootsrap
  • -   Lebih responsive
  • -   Bisa  Membuat multi-column layout dengan mudah dan cepat
  • -   Mempermudah membuat navigasi bar yang berfariasi
  • -   Mempermudah membuat komponen seperti accordions, modals dll, tanpa menulis banyak kode java script.
Lalu, apasih tugas/ yang dilakukan Bootstrap ???

  • Bootsrap mempersiapkan kode-kode CSS, yang tinggal dipakai
  • Kode-kode javaScript yang berhubungan dengan tampilan agar lebih interaktif, juga bisa tinggal dipakai


 catatan : Tidak semua kode css/javascript yang kita mau ada didalamnya, jadi kita bisa menambahkannya sendiri



Mungkin sekian untuk materi kali ini , mohon maaf bila ada salah kata/ penulisan dan kekurangan apapun , terimakasih


Bukti kehadiran : 











di Tidak ada komentar:
Langganan: Komentar (Atom)

Tugas UAS ( Sistem login user pada market place )

Dfd login market place pada dfd saya menambahkan sistem login untuk user, ketika user melakukan login maka sistem akan menyimpan beberapa da...