RANGKUMAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB

RANGKUMAN PRAKTIKUM

Assalamualaikum WR.WB

Halo gaes apa kabar sudah lama tidak bertemu, kenalin Nama-ku Vika Tanjung H biasa di panggil Tanjung
Kali ini ada tugas nih untuk merangkum praktikum pemrograman bebasis web yang ku kerjakan sejak minggu kemarin
Mata Kuliah pemrograman berbasis web ini adalah mata kuliah yang membahas apa pun itu yang berhubungan dengan web yang sudah menjadi rutinitas kita sehari hari. Dari cara membuat web dari 0, lalu bagaimana cara nya biar terlihat menarik, banyak deh pokok nya.

Udahan deh basa basi nya langsung aja ke rangkuman nya yuk!

POKOK BAHASAN 1

HTML ( Hypertext Markup Language )

Disini kita di kenalin nih dari basic nya dulu apa itu :

1. Pemrograman berbasis HTML

   2. Struktur dan fitur-fitur pada HTML
   3. Kode-kode HTML
   4. Pembuatan dan fungsi form

Ok kita mulai pada point pertama, apa sih pemrograman berbasis HTML itu?

Pemrograman berbasis HTML ialah suatu bahasa pemrograman yang bisa membuat suatu page web

Kalau HTML nya sendiri itu apa?

HTML adalah, (Hypertext Markup Language) sebuah bahasa standar yang digunakan oleh browser internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. HTML juga dapat digunakan sebagai link-link antara file-file dalam situs atau dalam computer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

Sudah paham sampai disini? yuk kita lanjut ke point nomor 2

Apa sih struktur HTML?
Struktur HTML menurut ku adalah seperti tiang pada bangunan, kita harus menyertakan struktur agar bisa terbaca sebagai halaman WEB yang utuh
kalau fitur fitur HTML apa saja?

<canvas>, memungkinkan menggambar menggunakan script kode seperti JavaScript. Dibandingkan dengan versi terdahulunya yang perlu menggunakan aplikasi tambahan untuk membuat interaksi seperti flash.
<audio> dan <video>, merupakan tag penanda untuk konten audio dan video. Jadi kita dapat menyisipkan konten audio dan video secara langsung, berbeda dengan generasi sebelumnya yang harus menggunakan flash untuk menyisipkan konten ini.
, digunakan untuk menampilkan konten interaktif (plugin) atau aplikasi eksternal.
<section>, digunakan untuk mendefinisikan section apapun pada dokumen. Dapat dikategorikan bekerja seperti div yang memisahkan section yang berbeda.
<article>, mendifinisikan artikel, komentar pengguna atau sesuatau konten yang independen.
Local Storage, berfungsi sebagai pengganti cache sebagai media penyimpan halaman history web. memungkinkan menyimpan data cache lebih banyak pada local dibanding dengan browser biasa.
Web Workers, pada dasarnya membuat proses load java script yang kadang kali mengganggui dengan menjadikan proses lambat menjadi lebih cepat, shingga dapat dilakukan proses multi tasking.
Semantic , membuat halaman web lebih dinamis, diantaranya akan menghentikan programer dalam menggunakan tag div atau nav sebagai navigasi.

Oke, kalau kode kode HTML?

nih ku kasih contoh struktur HTML5 aja ya

<!DOCTYPE html>
<html>
    <head>
        <title>Judul halaman</title>
    </head>
<body>
    <p>Isi halaman</p>
</body>
</html>

Apa sih form pada html itu?

Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form pada halaman Web. Elemen Form dapat terdiri dari check box, radio button, menu, text box, text area, dan button.

Dan ini fungsi fungsi nya

<form>	Mendefinisikan pembuatan Form
<input>	Tag ini adalah tag yang sudah pasti selalu digunakan, karena di dalamnya dapat dimasukan radio, checkbox, kotak dialog dll.
<textarea>	Digunakan untuk memasukan informasi dalam jumlah banyak.
<fieldset>	Untuk mengelompokan form sesuai kegunaannya untuk apa.
<legend>	Memberi nama pada form tersebut.
<label>	Memudahkan pengisian form dengan cara mengarahkan mouse pada teks.
<select>	Membuat menu dropdown yang berisi item – item pilihan.
<option>	Mendefinisikan item – item pilihan pada tag <select>
<optgroup>	Mendefinisikan judul grup dari item – item pilihan.
<button>	Mendefinisikan Tombol submit untuk memproses form.

POKOK BAHASAN II
CSS (Cascading Style Sheet)

Disini kita di ajari apa itu:

Bagaimana cara nya membuat style sheet pada dokumen HTML
Bagaimana memahami aturan penulisan pada CSS
Bagaimana membuat layout website dengan CSS

Apa sih CSS itu?

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalams ebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemrograman.

lansgung saja pada point pertama yaitu cara membuat style sheet pada HTML

ada jenis CSS yaitu :

CSS internal
CSS external

Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Intarnal 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 adalah kode CSS yang ditulis terpisah dengan kode HTML. Eksternal CSS ditulis disebuah file khusus yang berekstensi .css

cara membuat nya gampang
berikut Saya masukkan contoh css internal

<style type="text/css">
    p{
      font-family: serif;
      line-height: 1.75em;
      font-size: 18px;
    }
    i { 
      font-family: sans;
      color: orange;
    }
  </style>
</head>

Dari kode diatas bisa dilihat kita bisa mengatur font, warna, dan ukuran huruf tersebut

Tetapi internal css jarang digunakan oleh progammer.

Contoh penulisan CSS eksternal

p {
    font-family: serif;
    line-height: 1.75em;
}

i {
    font-family: sans;
    color: orange;
}

h2 {
    font-family: sans;
    color: #333;
}

Untuk menggunakan CSS tersebut dalam HTML, kita perlu mengimpornya. Ada beberapa cara memasukkan kode CSS dari berkas eksternal:

Pokok Bahasan III

JAVA SCRIPT

Tujuan

1. Memahami tentang struktur javascript.

2. Memahami tentang pemrograman di javascript.

3. Memahami tentang pemakaian object dan form.

Javascript adalah bahasa scrip yang ditempel pada kode HTML dan diproses disisi klient. Dengan adanya bahasa ini, kemampuan HTML menjadi semakin luas. Contoh: untuk menvalidasi masukan pada formulir sebelum formulir dikirim ke server. Javascript bukan bahasa java dan merupakan dua bahasa yang berbeda. Javascript diinterpretasikan oleh klient, sedang java dikompilasi oleh program dan hasil kompilasinya dijalankan oleh client.

Struktur Javascript

<!—

Penulisanjavascriptkode

//--> </script>

Keterangan  umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali javascript maka browser akan memperlakukannya sebagai komentar sehingga tidak di tampilkan dijendela browser.

Javascript sebagai bahasa berorientasikan objek

Properti Adalah atibut dari sebuah objek. Contoh: objek mobil mempunyai property warna mobil.

Penulisan:

nama_objek.nama_properti=nilai

window.defaultstatus=”selamat belajar javascript”

Metode Adalah sekumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek. Penulisannya:

nama_objek.nama_method(parameter)

document.write(“halo”)

Letak javascript dalam HTML

Skrip javascript dalam dokumen HTML dapat diletakkan pada:

1. Bagian head

2. Bagian body

Pokok Bahasan IV

PHP

A. Tujuan

1. Mengenalkan kepada mahasiswa tentang pemrograman PHP

2. Mahasiswa mampu memahami Instalasi Apache dan PHP.

3. Memahami tentang struktur kontrol.

4. Mahasiswa dapat membuat halaman web dengan menggunakan script HTML dan PHP

PHP (Preprocesor Hypertext) adalah bahasa scripting yang menyatu dengan HTML dan
dijalankan pada server side. Artinya semua sintaks yang diberikan akan sepenuhnya dijalankan
pada server sedangkan yang dikirimkan ke browser hanya hasilnya saja berupa HTML. Untuk
membedakan perintah HTML dan PHP digunakan tanda <? ... ?> atau <?php ... ?> PHP dapat
diaplikasikan dengan berbagai macam database, seperti MySQL, PostgreSQL" Oracle, dan
lainnya.

Beberapa script dasar PHP

1. Menampilkan text
Echo “....text......<br>”
<br> : ganti baris
2. Variabel
.tuk membuat variabel diberi tanda dollar ($). Variabel berfungsi untuk menyimpan
suatu nilai dan dapat berubah-ubah. Penulisan variable yang benar adalah :
Karakter pertama tidak boleh berupa angka (harus berupa huruf atau garis
bawah) Tidak mengandung spasi
Pemakaian hurufkapital dan hurufkecil
dibedakan Contoh contoh penulisan variable:
$data_$data1, $data_ku
PHP dapat anda Download secara free atau cuma-cuma. Kunjungi saja situs www.php.net,
dan download versi terbarnnya, atau alternatifnya sekarang banyak yang paka xamp untuk menjalankan server php.

APA ITU XAMPP?

XAMPP merupakan aplikasi cross platform : Apache, MySQL, PHP dan Perl. XAMPP juga memberikan solusi sederhana dan cukup rngan untun dijalankan, memungkinkan kita membuat web server lokal untuk melakukan pengetesan website.

XAMPP dapat dijalankan di MAC ataupun Linux.

Pokok Bahasan V

Konektivitas PHP dengan MySQL

Tujuan:
1.Memahami langkah-langkah koneksi PHP dengan MySQL.
2. Memahami perbedaan pengambilan record dari database

Dasar Teori
Langkah-langkah koneksi PHP-MySQL 1. Membuka koneksi ke server MySQL
mysqI_connect()
Digunakan untuk melakukan uji dan koneksi kepada server database MySQL.
Sintaks :

$conn = mysqI_ connect ("host" ,"username" ,"password");

2. Memilih database yang akan digunakan di server mysqI_select_dbO
Digunakan untuk melakukan koneksi kepada database yang dalam server yang berhasil dikoneksi
dengan perintah mysql_ connectt),
Sintaks :

$db = mysqI_select _ db("namadatabase" ,$conn);

$db : berisi status koneksi kepada database.
$conn : merupakan koneksi kepada server database yang berhasil.
namadatabase : adalah nama database yang akan dikenai proses.

3. Mengambil sebuah query dari sebuah database.

a. mysql_query)
Digunakan untuk melakukan eksekusi perintah SQL untuk memanipulasi database yang berhasil
dilakukan koneksinya menggunakan mysql_select _db().
Sintaks $hasil = mysqI_query("SQL Statement");

$ hasil : akan berupa record set apabila SQL statement berupa perintah select
Contoh SQL Statement: "SELECT * FROM MAHASISWA ORDER BY NIM"

4. Mengambil record dari database

a. mysql_fetch_array
Digunakan untuk melakukan pemrosesan hasil query yang dilakukan dengan perintah mysql
queryt), dan memasukkannya ke dalam array asosiatif, array numeris atau keduanya.
Sintaks : $row = mysql_fetch_array($hasil);
sesuai dengan nomor urut dari proses mysql , fetch_array yang sedang dilakukan. $hasil : adalah

d. mysqI_num_rowsO

record set yang akan diproses.

b. mysqI_fetch_assocO
Fungsi ini hampir sama dengan fungsi mysql fetch arrayt), hanya saja array yang dihasilkan
hanya array asosiati£
Sintaks : $row =mysql_fetch_assoc($hasil);

c. mysqI_fetch_rowO
Fungsi ini hampir sama dengan fungsi mysql fetch arrayt), hanya saja array yang dihasilkan
hanya array numens.
Sintaks : $row =mysql_fetch_row ($hasil);

d. mysql_num_rows()
Fungsi ini digunakan untuk menghitung jumlah record yang ada pada database
Sintaks : $jml = mysql_num_rows($hasil);
$jml : akan memiliki nilai sesuatu dengan jumlah record yang ada pada database.

Pokok Bahasan VI

Desain Web Model Dengan JQuery Mobile

A. Tujuan
   1. Mahasiswa memahami tentang jquery mo bile
   2. Mahasiswa memahami interkoneksi antar halaman
   3. Mahasiswa memahami pembuatan aplikasijquery
   4. Mahasiswa mampu menampilkan aplikasi yang dibuat di emulator mobile

B. Dasar Teori
   jQuery Mobile adalah framework berbasis jQuery yang memudahkan kita untuk membuat web
app untuk mobile. Selain jQuery mobile sebenamya banyak ramework lain yang dapat
digunakan seperti Sencha, jTouch, DHTMLX Touch, 10 dan lainnya. Kelebihan jQuery
adalah:

jQuery
   Mobile menyediakan komponen VI widget seperti button, listview, header dan elemen form dan
navigasi.Kode ini dibangun olehjQuery dan terns dikembangkan oleh pengembangnya secara
aktif untuk memperbaiki bug-bug yang ada diaplikasi ini, Banyak frtur yang ditawarkan dalam
framework ini termasuk dukungan HTML5, Ajax-powered navigasi link, dan sentuhan/atau
navigasi gesekan.
Sebelum melakukan praktikum Desain Web Mobile dengan jQuery Mobile nn, yang perlu
disiapkan adalah:
   a. jquery.mobile-.1.~.2.min.css }
   b. jquery-Lv.Lmin.js Dapat di download di http://jquerymobile.comJ
   c. jquery.mobile-1.3.2.min.js
   d. Images
   e. Opera Mobile Emulator download gratis.
   1. Support banyak platform: Webkit (Android, iOS, Opera, Chrome), Firefox
       mobile, Windows Phone, Blackberry, Bada, Meego.
   2. Berbasis 1Query yang populer.
   3. Penggunanya banyak dan forum akti£

Kalau yang kepo kampusku monggo klik Disini dan Disini

Search This Blog

Vika Tanjung H UMSIDA

RANGKUMAN PRAKTIKUM PEMROGRAMAN BERBASIS WEB

Comments

Post a Comment

Popular posts from this blog

Rangkuman Praktikum Algoritma

Rangkuman Praktikum Basis Data