LAPORAN PARKTIKUM BP MODUL 2

LAPORAN PRAKTIKUM

BAHASA PEMOGRAMAN II

MODUL II

Disusun oleh:

Nama    : Azis furqon

Kelas    : SI (A) 2015 

NIM     : 2015091022

LABORATORIUM ILMU KOMPUTER

“UNIVERSITAS KUNINGAN”

2016-2017

A.    TUGAS

Pada tugas kali ini, saya akan memberikan sedikit cara membuat Database menggunakan Netbeans. Sebenarnya pada sofware netbeans sudah disediakan fitur tool visual termasuk untuk membuat database, namun untuk sekedar pembelajaran, disini saya akan menggunakan perintah Transact atau menggunakan kode-kode tanpa menggunakan tools visual.

Berikut langkah-langkah untuk membuat database kartu keluarga :

1.      Buka Aplikasi NetBeans, setelah itu pilih NEW PROJECT, kemudian pilih Java setelah itu pilih bagian kanan yaitu Java Application seperti pada gambar dibawah ini.

2.      Next -> selanjutnya buat nama project dan tentukan lokasi tempat penyimpanan project Lalu klik finish. Langkah kedua adalah masukan nama dari project yang kita buat, disini saya menggunkan nama azisfurqon dan menyimpannya di direktori E:\azisfurqon semuanya bisa kita sesuaikan sesuai keinginan kita

3.      Pada Projects Eksplorer aktifkan tab Services

4.      Sebelum kita melanjutkan project kita, kita aktifkan dahulu Database server yang akan digunakan, disini saya menggunakan xampp yang difungsikan sebagai penghubung MySQL (2),  dengan PORTS 3306. Supaya bisa terkoneksi ke NetBeans, klik Start(3) . Untuk lebih jelasnya bisa dilihat pada gambar dibawah ini :

5.      Kembali lagi ke NetBeans, pilih tanda (+) pada menu Database, kemudian klik kanan pada menu MySQL Server at Localhost:3306[root]. Localhost adalah server lokal yang dimiliki oleh XAMPP, dan 3306 adalah PORT dari MySQL tersebut dengan nama Administrator "root".

6.     
Klik kanan kembali pada server MySQL lalu klik Create Database,  pada kotak isian yang muncul isikan nama database misalkan kartu_keluarga lalu klik Ok.

7.      Selanjutnya kita akan membuat tabel pada database kartu_keluarga. Pertama kita akan membuat tabel tb_provinsi.  Kita dapat menggunkan perintah seperti dibawah ini : 

CREATE TABLE tb_provinsi(

kd_prov INT(3) PRIMARY KEY,

nm_prov VARCHAR(30) NOT NULL

)

Untuk membuat database atau tabel baru, kita bisa menggunakan perintah Create Databse, Create Table. 

• kd_prov dan nm_prov merupakan atribut atau field yang kita buat.
• int, varchar merupakan tipe data yang digunakan.
• Primary Key merupakan kunci utama atau kunci yang dapat mempengaruhi attribut atau fieds lain.
• Not Null merupakan perintah yang berarti Field tersebut harus diisi atau tidak boleh dikosongkan. 

8.      Blok script yang sudah dibuat lalu klik kanan dan pilik Run Selection

 

9.      Ketika tabel berhasil dibuat, maka akan muncul peringatan atau pemberitahuan pada bagian menu output seperti dibawah ini. Prosess compile atau running program hanya dapat dilakukan sekali untuk pembuatan tabel dan database dengan nama yang sama. karena dalam database sangat tidak mungkin terjadinya redudansi data.

 

10.      Selanjutnya kita buat tabel tb_kabupaten, hampir sama dengan tabel provinsi tadi, tapi kita kembali membuat field kd_prov, fungsinya sebagai foreign key atau kunci tamu.
Ulangi proses yang sama dengan proses sebelumnya hingga tabel "tb_anggota".

 

Tabel Kabupaten, Tabel Kecamatan,   Tabel Desa, Tabel Keluarga, Tabel Anggota

 

         

Tabel selesai dibuat. selanjutnya kita akan melihat salah satu tabel yang telah tadi kita buat.

"Select * from tb_provinsi"

• Select : Berfungsi untuk memilih atau membuat perintah pemilihan data.
• * : Berarti semua. jadi pada perintah diatas kita akan menampilkan semua field dan record dari tabel tb_provinsi.

Dibawah ini merupakan ke-6 tabel yang telah kita buat.

Sekarang kita akan mencoba memasukan data kedalam tabel "tb_provinsi & tb_kabupaten". Dengan skrip dibawah ini :

·         insert  : Digunakan untuk menyisipkan data kedalam database.

• Setiap records yang merupakan primary key tidak boleh ada yang sama seperti pada tebel tb_provinsi "kd_prov" dan tb_kabupaten "kd_kab".

·         Namun berbeda dengan Foreign Key yang bisa mempunyai records  yang sama seperti pada tb_kabupaten "kd_prov".

10.  Sekarang kita akan membuat perintah view untuk melihat isi dari tb_provinsi. Pertama kitaklik kanan pada menu view>>Create View seperti pada gambar dibawah ini.

11.  Berikutnya kita isikan nama dari view yang kita buat. Nama dari view ini dapat disesuaikan agar mudah di ingat. kemudian masukan perintah  Select * from tb_provinsi yang berarti kita akan menampilkan semua isi dari tb_provinsi. 

12.   Berikut view yang telah kita buat tadi : 

13.   Ketika perintah view dieksekusi, maka outputnya sebagai berikut : 

Laporan praktikum WEB 1 (modul 3)

LAPORAN PRAKTIKUM

PEMOGRAMAN WEB 1

MODUL III

Disusun oleh:

Nama    : Azis furqon

Kelas    : SI (A) 2015 

NIM     : 2015091022

LABORATORIUM ILMU KOMPUTER

“UNIVERSITAS KUNINGAN”

2016-2017

Dasa teori:

Adapun pengertian dari HTML5 itu sendiri adalah versi terbaru dari HTML (HyperText Markup Language) yang mana dikembangkan oleh W3C atau Word Wide Web Consortium. HTML5 diciptakan dalam pengembangan bahasa HTML untuk memperbaiki konten dan memperbarui teknologi multimedia yang sudah ada pada HTML 4 dan versi sebelumnya agar mudah dijalankan oleh browser dan mudah dimengerti. HTML5 merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Teknologi Working Group (WHATWG). WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML 2.0. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Di sisi lain HTML5 sering juga disebut dengan Semantic Web. Semantic web berasal dari bahasa Yunani (Greek), merupakan bahasa pembelajaran semiotic, yakni pembelajaran untuk memahami penanda. Semantic sendiri mempunyai arti bahasa yang berfokus pada penanda untuk mengetahui arti yang terkandung di dalamnya. Jadi, yang dimaksud semantic web adalah bahasa pemrograman yang mempunyai penanda khusus dalam implementasinya dengan tujuan agar mampu mendeskripsikan apa yang terkandung dalam website tersebut. Web semantic ini bukan hanya dikembangkan di Web 2.0, namun sudah ke Web 3.0 bahkan akan berkembang ke Web 4.0. Perkembangan teknologi memang cepat sekali berubah. 

  

Praktikum 1

<!DOCTYPE html>

<html>

<head>

   <title>stying data article element</title>

   <script>document.elementbaru("gayal")</script>

   <style>

   gayal {

               display:block;

               background-color:#ddd;

               padding: 50px;

               font-size: 30px;

              

   }

   </style>

   </head>

   <body>

   <h1>my firs heading</h1>

   <p>my firs paragraph.</p>

   <gayal>format tampil css di HTML5</gayal>

   </body>

   </html>

Hasil output:

Analisa :

Ø  <!DOCTYPE html> tag untuk menentukan tipe document

Ø  <title>stying data article element</title> digunakan untuk judul alamat web yang kita buat

Ø  <script>document.elementbaru("gayal")</script> Mendefinisikan client-side script

Ø  <style>...</style> yang digunakan untuk menyisipkan kode css dalam dokumen HTML. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <style>.

Ø     display:block; untu memblok daerah yang kita inginkan

Ø  background-color:#ddd; untuk mewarnai beground yang telah ditentukan dan symbol #ddd yaitu kode warna abu-abu

Ø      padding: 50px; Padding adalah sebutan untuk spasi atau ruang diantara konten dan border. padding berada diantara konten utama dengan border. Jadi, kenapa saya membahas border dulu sebelum padding? Ini karena untuk dapat melihat efek padding, kita harus menggunakan border. Tanpa border, padding akan susah untuk dilihat. Property padding bisa diisi dengan satuan panjang seperti pixel, persen, em, dll. Sebagai contoh, untuk membuat padding sebesar 10 pixel, saya bisa menggunakan kode berikut:

Ø  font-size: 30px; untuk merubah ukuran huruf yang kita inginkan seperti pada contoh 30px yang menggunakan satuan pixel

Ø  <p>my firs paragraph.</p> utuk membuat suatu paragraph yang kita inginkan

Praktikum 2

<!DOCTYPE html>

<html>

<head>

   <title>HTML5</title>

   <style>

   body

   {font-family: verdana, sans-serif; font-size:0.8em;}

   header, nav, section, article, footer

   {border:1px solid grey; margin:5px; padding:8px;}

   nav ul {margin:0; padding:0;}

   nav ul li{disply:inline; margin:5px;}

</style>

</head>

<body>

<header>

<h1>html5 sekeleton</h1>

</header>

<nav>

<ul>

   <li><a href="#">Home</a></li>

   <li><a href="#">menu</a></li>

   <li><a href="#">About</a></li>

</ul>

</nav>

<section>

<h2>UNIKU FACULTY</h2>

<article>

<h2>FKOM</h2>

<p>fakultas ilmu komputer</p>

</article>

<article>

<h2>FKIP</h2>

<p>fakultas ilmu pendidikan</p>

</article>

<article>

<h2>FHUT</h2>

<p>fakultas ilmu kehutanan</p>

</article>

</section>

<footer>

<p>&copy; @azis furqon FKOM factulity</p>

</footer>

</body></html>

Hasilnya adalah:

Analisis:

Ø <!DOCTYPE html> tag untuk menentukan tipe document

Ø  Tag <footer> biasannya digunakan pada bagian bawah halaman, dimana kita menampilkan beberapa informasi mengenai website. Walapun penggunaan paling jelas adalah untuk bagianfooter halaman (meletakkan copyright, about us, dll), tag ini juga cocok digunakan pada bagian bawah artikel untuk menampung informasi tambahan seperti ‘tentang penulis‘ maupun link untuk share ke sosial media.

Ø  Tag <header> digunakan untuk bagian halaman web yang merupakan header. Tag ini bisa muncul lebih dari 1 kali, tergantung kebutuhan. Bagian atas web dimana kita meletakkan logo dan judul situs adalah tempat terbaik untuk tag <header>. Namun di bagian atas artikel dinama terdapat judul dan sub judul artikel juga bisa di ‘bungkus‘ dengan tag <header>.

Ø  Tag <nav> digunakan sebagai ‘container‘ dari menu navigasi. Sebaiknya digunakan untuk menu utama yang dirasa penting seperti pada bagian header.

Ø  <li>        Digunakan untuk menampilkan informasi dalam bentuk item daftar  karena dalam program diguanakan fungsi tag <li><a href="#">Home</a></li> maka yang terjadi adalah tulisan yang berurutan ke bawah dan membentuk bullet hitam pada tulisan dikiri

Ø  <ul> Mendefinisikan daftar dalam format bullet

Ø  Tag <section> digunakan untuk memisahkan bagian-bagian dari struktur web. Tag ini bisa digunakan sebagai container untuk kumpulan artikel, gallery, atau bagian lain dari halaman web yang perlu pemisahan. Walaupun tag <section> terkesan ‘generik’, tetapi jika yang kita butuhkan hanya kontainer tanpa makna apa-apa, sebaiknya tetap menggunakan tag <div>.

Bagian utama dimana kontent berada bisa ‘dibungkus’ menggunakan tag <section>. Dan jika halaman tersebut memiliki banyak bagian yang secara logika bisa dipisah, bisa menggunakan beberapa tag <section>.

Ø  Tag <article> bertujuan untuk menampung konten web yang merupakan.. (ya, anda benar) artikel. Umumnya tag ini berada di dalam tag <section> atau <main>. Tag ini cocok sebagai container untuk artikel dalam sebuah blog.

Praktikum 3

<!DOCTYPE html>

<html>

<head>

<from action="action_page.php">

   <select name ="cars">

   <option value="volvo">Volvo</option>

   <option value="saab">Saab</option>

   <option value="fiat">Fiat</option>

   <option value="audi">Audi</option>

   </select>

   <br><br>

<textarea name="massage" rows="10" cols="30">

the cat was playing in the garden.

</textarea>

<br><br>

<button type="button"

onclick="alert('anda menekan tombol clik me')"click me!</button>

<br><br>

<input list="browsers">

<datalist id ="browsers">

   <option value="internet explorer">

   <option value="firefox">

   <option value="chrome">

   <option value="opera">

   <option value="safari">

   </datalist>

   </form>

   </body>

   </html>

Hasilnya adalah:

Praktikum 6

<html>

<title>king abdul azis</title>

<body><br><br>

<audio  widht="320" height ="240" controls>

   <source src ="jkf.mp3" type="audio/mp3">  

</audio>

<audio  widht="320" height ="240" controls>

<source src ="fjf.mp3" type="audio/mp3">

</audio>

</body>

</html>

Hasilnya adalah:

Analisis:

Sebelum kita mamasukan yang namanya audio kedalam pemograman html maka di haruskan untuk menyatukan satu folder dengan programnya supaya memudahkan dalam pembacaan tag html, selanjutnya kita menentukan ukuran suatu audio  dengan menggunakan tag <audio  widht="320" height ="240" controls> selanjutnya untuk tag <source src ="jkf.mp3" type="audio/mp3"> digunakan untuk menentukn audio mana yang akan kita masukan yang ada dalam satu folder yang disatukan tadi. Begitupun seterusnya untuk video yang ke dua.

Post test:

Buatlah script HTML5 yang menjalankan sebuah video mp4 di halaman WEB

folder 1

<frameset rows=30%,*>

<frame src="header.html"></frame>

<frameset cols=50%,*>

<frame src="menu.html"></frame>

<frame src="conten.html"></frame>

</frameset> </frameset>

Folder 2 header

<html>

<body bgcolor="white">

<font color="orange">

<center><h1>Universitas Kuningan</h1>

<h3>Fakultas Ilmu Komputer</h3>

</font>

</body> </html>

Folder 3 vidio 1

<html>

<body><center><br><br>

<video widht="320" height ="240" controls>

   <source src ="azis.mp4" type="video/mp4">

</video></body></center>

</html>

Folder 4 vidio 2

<html>

<body><center><br><br>

<video widht="320" height ="240" controls>

   <source src ="videoplayback.mp4" type="video/mp4">

</video></body></center>

</html>

Hasilnya adalah:

Analisis:

<frameset rows=30%,*>

Freme set digunakan untuk membagi halaman menjadi beberapa bagian sesaui dengan keinginan kita sendiri dan di atas mengguakan ukuran 30%

<frame src="header.html"></frame>

<frameset cols=50%,*>

<frame src="menu.html"></frame>

<frame src="conten.html"></frame>

</frameset> </frameset>

Kemudian tag yang di atas difungsikan untuk memanggil halaman yang kita inginkan/yang kita buat dalam satu folder yang sama

Sebelum kita mamasukan yang namanya vidio kedalam pemograman html maka di haruskan untuk menyatukan satu folder dengan programnya supaya memudahkan dalam pembacaan tag html, selanjutnya kita menentukan ukuran suatu vidio  dengan menggunakan tag <vidio  widht="320" height ="240" controls> selanjutnya untuk tag <source src ="jkf.mp3" type="vidio/mp4"> untuk yang namaya video menggunakan format mp4  yang dihususkan untuk video digunakan untuk menentukn audio mana yang akan kita masukan yang ada dalam satu folder yang disatukan tadi. Begitupun seterusnya untuk video yang ke dua.