Scribd Logo
Unggah

Selamat datang di Scribd!

  • P3 - Pertemuan 03

    Diunggah oleh

    Kelas Kreatif
    1 tayangan13 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    1 tayangan13 halaman

    P3 - Pertemuan 03

    Diunggah oleh

    Kelas Kreatif

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 13

    {VIEWS}

    WEB
    FRAMEWORK
    EKA ANAS JATNIKA, M.DS
    PARTISI
    TEMPLATE
    Untuk mengatur view agar terlihat lebih dinamis,
    kita perlu mempartisi bagian per bagian dari kode
    Html.

    Seperti yang kita ketahui bahwa code Html terdiri


    dari 3 bagian yaitu Header, Body dan Footer.

    Biasanya setiap halaman yang jumlahnya banyak


    terdapat kode header dan footer yang sama, agar
    tidak memakan banyak kode kita bisa mempartisi
    bagian tersebut agar bisa digunakan oleh banyak
    halaman.

    HEADER

    BODY

    FOOTER
    MENGATUR CONTROLLER

    Untuk membaginya kita atur dulu tampilannya


    pada controllor dengan membagi views menjadi
    3 yaitu template header, body dan template
    footer seperti contoh gambar di bawah ini.

    Walaupun terlihat terpisah, sebenarnya controller


    menyatukan ketiga file menjadi 1 kesatuan yang
    dimana dalam 1 function index mengandung
    header, body dan footer.
    MEMBUAT TEMPLATE ISI HEADER.PHP

    Buat file header.php dan footer.php di dalam


    folder template, sebelumnya buat folder
    template pada folder views > home

    ISI FOOTER.PHP

    ISI BODY / INDEX.PHP


    Isi dari body atau file index.php diisi dengan
    konten yang kita butuhkan, karena setiap
    halaman pastinya berbeda isinya.
    FRONT ~END
    DESAIN TAMPILAN WEB
    NAVBAR

    Navbar atau sekumpulan menu navigasi


    biasanya dibuat paling atas posisinya, dan
    disetiap halaman pastinya selalu ada.

    Dari konsepnya bisa kita pasang code


    navbar di bagian header agar bisa dipakai
    oleh halaman yang lainnya.

    Agar mudah, kita bisa membuat navbar


    menggunakan bootstrap, berikut kode
    navbarnya:

    Simpan kode navbar di file header.php, simpan di bawah kode <body>

    Tampilan pada Web


    HERO / JUMBOTRON

    Hero atau Jumbotron bisa digunakan


    sebagai pemanis web, karena biasanya
    berisikan info penting. untuk membuatnya
    kita pasang kode hero / jumbotron di
    halaman index karena biasanya hero /
    jumbotron selalu berada di halaman utama.
    Simpan kode navbar di file index.php
    Agar mudah kita bisa menggunakan
    jumbotron bawaan bootstrap, berikut
    kodenya:
    Tampilan pada Web
    CARD

    Agar tampilan lebih menarik lagi, kita bisa


    menambahkan card, fungsi card pada web
    yaitu untuk memberikan gambaran ringkas
    mengenai suatu informasi.

    Di bootstrap pula sudah disediakan kode


    untuk membuat card, kita bisa simpan di
    bawah hero / jumbotron.

    Simpan kode card di file index.php tepatnya di bawah kode jumbotron

    Tampilan pada Web


    FOOTER

    Footer merupakan bagian terakhir yang


    biasanya ada di posisi paling bawah. Kita
    bisa membuat code seperti pada gambar di
    samping menggunakan bootstrap.

    Simpan kode footer di file footer.php, tepatnya di atas kode </body>

    Tampilan pada Web


    Tampilan Akhir

    Selesai
    TUGAS 1
    DESAIN TAMPILAN WEB UNTUK TUGAS AKHIR P3
    TUGAS 01 KIRIM

    • Buatlah semua tampilan (View) halaman web • Kirim tugas dalam bentuk .zip atau .rar
    yang dibutuhkan (Untuk tugas akhir
    Pemrograman 3) dengan menggunakan • Kirim tugas melalui E-Mail ke codetalk.id@gmail.com
    CodeIgniter dan Bootstrap
    • Isi subjek dengan “Tugas 1 P3”
    • Tema web bebas
    • Paling telat dikumpulkan hari Sabtu, 27 Februari 2021

    Anda mungkin juga menyukai