Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pertemuan 3

    Diunggah oleh

    doni salmanan
    13 tayangan29 halaman

    Judul Asli

    Pertemuan3

    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
    13 tayangan29 halaman

    Pertemuan 3

    Diunggah oleh

    doni salmanan

    Hak Cipta:

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

    PELATIHAN JUNIOR WEB

    DEVELOPER
    Hari Lugis Purwanto

    Program Studi Sistem Informasi


    Universitas PGRI Kanjuruhan Malang
    2021
    J.620100.005.02
    Mengimplementasikan User Interface

    Junior Web Programmer – Pertemuan 3


    HTML

    • Tag adalah sebauh penanda awalan dan akhiran dari sebuah


    elemen di HTML. Tag dibuat dengan kurung siku (<...>), lalu di
    dalamnya berisi nama tag dan kadang juga ditambahkan dengan
    atribut.
    HTML

    • <html> : untuk memulai dokumen HTML


    • <head> : untuk membuat bagian head
    • <title> : untuk judul web
    • <body> : untuk membuat bagian body
    • <h1> sampai <h6> : untuk membuat heading pada artikel
    • <p> : untuk membuat paragraph
    • <br> : Memasukan satu baris putus
    • <hr> : Tag untuk membuat perubahan dasar kata didalam
    isi
    • <!-- --> : untuk membuat komentar
    Pengertian CSS

     Kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan
    halaman HTML
     HTML ditujukan untuk membuat struktur, atau konten dari halaman web
     CSS digunakan untuk tampilan dari halaman web tersebut.
     HTML for content, CSS for Presentation
     CSS adalah bahasa kedua setelah HTML yang harus dipelajari seorang web developer
    Variasi atau Versi CSS

     CSS 1: adalah versi pertama (17 Desember 1996)


     CSS 2: adalah versi ke-2 (Mei 1998)
     CSS 2.1: (7 juni 2011)
     CSS 3: (2012)
     CSS 4: masih dalam pengembangan.
    <!DOCTYPE html>
    <html>
    <head>
    <title>Test Tag Font HTML</title>
    </head>

    <body>
    <p>
    CSS merupakan bahasanya <font color="red">desainer web</font>.
    Namun sebenarnya, apa itu CSS?
    <br />
    <font color="red">CSS </font> adalah kumpulan kode yang digunakan
    untuk mendefenisikan desain dari bahasa markup,
    <font color="red">salah satunya adalah HTML</font>.
    <br />
    Dengan CSS kita bisa mengubah desain dari
    <font color="red">text, warna, gambar dan latar belakang</font>
    dari (hampir) semua kode tag HTML.
    </p>
    </body>
    </html>
    Bagaimana jika halaman tersebut
    mencapai 50 halaman???
    <!DOCTYPE html>
    <html>
    <head>
    <title>Test Background Color CSS</title>
    <style type="text/css">
    .warna {
    color: red;
    }
    </style>
    </head>

    <body>
    <p>
    CSS merupakan bahasanya <span class=warna>desainer web</span>.
    Namun sebenarnya, apa itu CSS?
    <br />
    <span class=warna>CSS </span>adalah kumpulan kode
    yang digunakan untuk mendefenisikan desain dari bahasa markup,
    <span class=warna>salah satunya adalah HTML</span>.
    <br />
    Dengan CSS kita bisa mengubah desain dari
    <span class=warna>text, warna, gambar dan latar belakang</span>
    dari (hampir) semua kode tag HTML.
    </p>
    </body>
    </html>
    Struktur Kode atau Sintaks Dasar CSS

     Selektor;
     Blok Deklarasi;
     Properti dan nilanya.
    Selector

     Kata kunci untuk memilih elemen HTML yang akan kita atur
     Selektor dapat berupa:
     Selektor Tag
     Selektor Class
     Selektor ID
     Selektor Atribut
     Selektor Universal
     selektor yang digunakan unutk menyeleksi semua elemen pada jangkaua
    (scope) tertentu
    Cara penulisan

     Inline CSS
     Kode CSS yang ditulis langsung pada atribut elemen HTML
     Setiap elemen HTML memiliki atribut style, di sana lah inline CSS ditulis
     Internal CSS
     Internal CSS adalah kode CSS yang ditulis di dalam tag <style>
     Internal CSS juga dikenal dengan sebutan Embeded CSS
     Tag <style> biasanya ditulis di dalam tag <head>.
     Bisa juga ditulis di dalam <body>, namun lebih banyak ditulis di dalam <head>.
     Eksternal CSS
     Kode CSS yang ditulis terpisah dengan kode HTML
     Ditulis disebuah file khusus yang berekstensi .css.
    Latihan Soal
    Latihan Soal (Eksternal)
    CSS

    • Text align : untuk mengatur posisi atau rata teks


    • Text-align left : Text rata kiri
    • Text-align right : Text rata kanan
    • Text-align center : Text rata tengah
    • Text-align justify : Text rata kanan kiri
    • Font-family : Format bentuk font
    • Font-size : mengubah ukuran font
    • Small : kecil
    • Medium : menengah
    • Large : besar
    • 12px : besar pixel 12px (bisa diganti 12pt)
    CSS

    • Font-style : merubah style font


    • Normal : font normal
    • Italic : font miring
    • Font-weight : ketebalan font
    • Normal : ketebalan normal
    • Bold : font tebal
    • Border : membuat sebuah border
    • Margin : mengatur seleksi batas jarak luar, seperti misal memberi jarak
    antara header blog dengan batas atas, bawah, kanan dan kiri dari kontent yang
    ada pada struktur header di sekitarnya
    • Padding : mengatur seleksi batas jarak dalam seperti memberi jarak pada
    header dengan batas tepi header misalnya padding:5px; jadi jarak header
    dengan batas tepinya 5px ke dalam.
    Praktek

    • Buka file: index.php


    • Buatlah tampilan Web dengan menggunakan HTML dan CSS seperti
    gambar berikut ini!
    J.620100.017.02
    Mengimplementasikan Pemrograman Terstruktur

    Junior Web Developer - – Pertemuan 3


    Praktek

    • Buatlah file lihat lihatTransaksi.php untuk menampilkan seluruh


    data yang ada di tabel transaksi sekaligus untuk hapus data.
    • Buatlah file lihatJenisTransaksi.php untuk menampilkan seluruh
    data yang ada di tabel jenisTransaksi sekaligus untuk hapus data
    • Buatlah file: simpanTransaksi.php yang digunakan untuk
    menyimpan data hasil posting dari Form Input Transaksi (soal D)
    ke tabel transaksi (soal B), dengan ketentuan:
    Harga Diskon Total
    >= 100.000 0.1 Harga-(diskon*harga)

    < 100.000 0.05 Harga-(diskon*harga)


    Praktek

    • Simpan hasil pekerjaan di: c:/xampp/htdocs/ujk-nim dengan


    nama file: simpanTransaksi.php
    • Buatlah file simpanJenisTransaksi.php yang digunakan untuk
    menyimpan data jenis transaksi
    • Buatlah file untuk melakukan editing data dari data transaksi dan
    data jenis transaksi
    J.620100.019.02
    Menggunakan Library atau Komponen Pre-
    Existing

    Junior Web Developer - Pertemuan 3


    Praktek

    • Siapkan library Jquery JEasyUI dan Bootstrap


    • Buka file index.php
    • Tambahkan library jquery.min.js dan jquery.easyui.min.js di dalam tag
    head
    • Tambahkan library themes bootsrap di dalam tag HEAD
    • Modifikasi form input transaksi agar mempunyai validasi saat
    button submit di-Klik
    • Simpan index.php
    Akses dan create PDF

    • Dari file index.php yang telah anda buat seblumnya, tambahkan


    sebuah tombol untuk atau link yang fungsinya adalah untuk
    membuat data transaksi terbentuk menjadi sebuah file pdf dengan
    library Dom PDF
    • Silahkan download Dom PDF pada link google drive yang diberikan
    Bonus Create File dan Save Data
    J.620100.023.02
    Membuat Dokumen Kode Program

    Junior Web Developer – Pertemuan ke 3


    Dokumentasi Source Code Program

    • Penamaan valiable, constant, procedure. Function yang


    jelas dan konsisten
    • Memberi keterangan pada header setiap procedure, yang
    berisis:
    • Fungsi dari procedure
    • Variable local masukan, dan keluaran
    • Variable global yang digunakan dan yang dipengaruhi.
    Pada Header Program diberi:

    • Nama penulis program


    • Editor
    • Compiler dan Library yang digunakan
    • Versi dan upgrade history
    • Tanggal pembuatan software
    • Deskripsi singkat tentang software
    • Deskripsi lebih detil bisa di letakkan pada file readme.txt yg
    sekaligus menjelaskan hingga struktur file dan folder program.
    Pada setiap modul diberikan informasi:

    • Nama modul
    • Fungsi
    • Parameter interface dan modus
    • Pre-assertion
    • Post-assertion
    • Dampak global dan sampingan
    • Exception
    • Prasyarat perangkat keras dan sistem operasi
    • Catatan pembuatan dan modifikasi
    • Algoritma
    • Struktur data utama
    • Called by:
    • Calls:

    Anda mungkin juga menyukai