Rangkuman Praktikum Pemrograman Berbasis Web
Rangkuman Praktikum Pemrograman Berbasis Web
1 - 6
Assalamualaikum wr.wb perkenalkan nama saya
Dimas Bayu Anjasmara
Mahasiswa Umsida Jurusan Teknik Informatika
Dari praktikum Algoritma dan Struktur Data ini saya mendapat ilmu yang banyak dan hampir semuanya bermanfaat, dari yang awalnya tidak bisa menjadi bisa.
Sekarang saya akan memberikan rangkuman tentang apa yang sudah saya dapatkan pada Praktikum
Pemrograman Berbasis Web yang bersumber dari modul asli UMSIDA.
Jika ingin mengenal lebih dalam tentang universitas saya, silahkan akses link berikut :
Rangkuman Pemrograman Berbasis Web
Rangkuman
Pemrograman Berbasis Web
Mengawali
Dokumen HTML5
dokumen
HTML5 diawali dengan tag yang lebih sederhana dari pada HTML 4.01. cukup
mendeklarasikan kode berikut untuk menunjukkan sebuah dokumen HTML5.
<!DOCTYPE
html>
Hanya
dengan tag sederhana tersebut, anda sudah siap untuk melakukan scripting.
Berikut ini adalah contoh dari dokumen HTML5.
Script:
|
<html> <head> <title>
Belajar HTML </title> </head> <body> Hihaniza Belajar
HTML pada praktikum pemrograman web </body> </html> |
Hasil :
1. Buat
tampilan formulir seperti berikut :
NB: nama, alamat, no.tlp harus diisi. url dan email harus dapat mendeteksi apakah inputannya sesuai format url atau email. Tunjukkan pada laporan anda tampilan jika data tidak diinput dan jika url/email diinput dengan format yang salah.
|
<!DOCTYPE html> <html> <head> <title>Formulirhihaniza260</title> </head> <body> <center> <h2>FORM
REGISTRASI</h2> </center> <form method="post"
action=""> <table> <tr> <td>Nama</td> <td>:</td> <td> <input
type="text" name="nama" id="nama"
placeholder="Masukkan Nama" maxlength="30"
size="32"> </td> </tr> <tr> <td>Alamat</td> <td>:</td> <td> <textarea
name="alamat" cols="30" rows="5"
id="alamat" placeholder="Masukkan
Alamat"></textarea> </td> </tr> <tr> <td>Tanggal
Lahir</td> <td>:</td> <td> <input
type="date" name="ttl" placeholder="input
ttl"> </td> </tr> <tr> <td>Telepon</td> <td>:</td> <td> <input
type="text" name="no. telp" size="32"
placeholder="Masukkan No. Telp"> </td> </tr> <tr> <td>URL</td> <td>:</td> <td> <input
type="url" name="url" id="url"
placeholder="Masukkan Alamat Web" maxlength="30"
size="32"> </td> </tr> <tr> <td>Email</td> <td>:</td> <td> <input
type="email" name="email" id="email" placeholder="Masukkan
Email" maxlength="30" size="32"> </td> </tr> <tr> <td>Jurusan</td> <td>:</td> <td> <select
name="jurusan"> <option
value="Teknik Informatika">Teknik Informatika</option> </select> </td> </tr> <tr> <td
colspan="2"></td> <td> <button
type="submit" name="kirim">Kirim</button> <button
type="submit" name="batal">Batal</button> </td> </tr> </table> </form> </body> </html> |
Output :
1. External
Style Sheet
CSS:
|
body {background-color: yellow} h1 {font-size: 36pt} h2 {color: blue} p {margin-left: 50px} |
Html:
|
<!DOCTYPE html> <html> <head> <link
rel="stylesheet" type="text/css"
href="hihaniza260.css"> </head> <body> <h1>This
header is 36 pt</h1> <h2>This
header is blue</h2> <p>This
Paragraph has a left margin of 50 pixels</p> </body> </html> |
Hasil :
1. Web Page Layout menggunakan table dan CSS
|
<html> <head> <title>hihaniza260
Web Page Layout menggunakan table dan
CSS</title> <style
type="text/css"> #main{ width:
720px; border-collapse:
collapse; border:
solid #000000 1px; } #header{ height:110px; width:
120px; background-color:#99CC00; color:#FFFFFF; font-family:verdana; font-size:25px; font-style:italic; } #content{ font-family:
Verdana,Arial,Sans-serif; font-size:
10pt ; padding-left:10px; padding-top:10px; padding-right:10px; padding-bottom:10px; } #navigation{ width:
160px; height:500px; text-align:
center; border:
solid 1px red; font-family:
Verdana, Arial, Helvetica, sans-serif; font-size:
8pt ; line-height:
22px; font-weight:
bold; background-color:#990000; } #footer{ text-align:
center; background-color:#000000; color:#FFFF66; font-family:
Verdana, Arial, Helvetica, sans-serif; font-size:
8pt ; height:30px; } </style> </head> <body> <table id=
"main" align="center"> <tr> <td
id="header" colspan="2" >Header</td> </tr> <tr> <td
id="navigation">Navigation</td> <td
id="content">Content</td> </tr> <tr> <td
colspan="2" id="footer">Bottom Navigation</td> </tr> </table> </body> </html> |
Hasil :
Dasar
–Dasar Java Script
1. Pemakaian
Alert Sebagai Property Windows
|
<html> <head> <title>Alert Box</title> </head> <body> <script language="javascript"> <!-- window.alert("Ini merupakan pesan untuk anda"); //--> </script> </body> </html> |
Hasil :
1.
Pemrograman PHP
dengan Array
Script:
|
<!DOCTYPE
html> <html> <head> <title>Pemrograman PHP dengan
Array</title> </head> <body> <?php //Penulisan Arradapat dibua seperti berikut $nama[] = "Anjasmara "; $nama[] = "Dimas ";
$nama[] = "Bayu "; echo
"$nama[1] $nama[2] $nama[0]"; echo "<br>"; //Pendefisian
array juga dapat juga seperti berikut ini $kampus['nama_kampus']="UMSIDA"; $jurusan['jurusan']="Teknik
Informatika"; echo "Kampusku adalah
$kampus[nama_kampus] $jurusan[jurusan]"; ?> </body> </html> |
Hasil:
Penambahan Script :
|
//menghitung
jumlah elemen array $jum_array= count($nama); echo "jumlah elemen array
=".$jum_array."<br/>"; |
Hasil:
1.
Proses input data dengan password
menggunakan metode : POST
a. File
untuk memproses variabel : proc_login.php
Script:
|
<html> <head> <title>proses input</title> </head> <body> <?php $username=$_POST("username"); $password=$_POST("password"); ?> username=<?echo $username?> <br> password=<?echo $password?> <br> </body> </html> |
b.
Untuk membuat inputan,
dan beri nama file : metodepost1.php
Script:
|
<html> <html> <head> <title>Contoh Form dengan
POST</title> </head> <body> <h1>input</h1> <form
action="proclogin.php"method="post"> <h1>Only For outorized
user</h1><hr> username:<input type="text" name="username"><br> password:<input
type="password" name="password"><br> <input type="submit"
value="proses"> </form> </body> </html> |
Hasil:
Hasil setelah diproses:
Membuat Database Latihan
Menguji interkoneksi PHP dengan MySQL.
|
<html> <head> <title>Koneksi Database
MySQL</title> </head> <body> <h1>Demo
Koneksi database MySQL</h1> <?php
$conn=mysqli_connect('localhost','root','','latihan'); if
($conn){ echo "OK"; }else{ echo "Server Not Connected"; } ?> </body> </html> |
Hasil:
a.
Buat
Form untuk buku tamu, beri nama bukutamu.htm
|
<html> <head> <title>Buku Tamu</title> </head> <body> <h1>Buku
Tamu untuk database MySQL</h1> <form
action="bukutamu_add_form.php" method="post"> Nama : <input type="text"
name="nama" size="35"
maxlength="50"><br> Email : <input type="text"
name="email" size="35"
maxlength="50"><br> Komentar : <textarea
name="komentar" rows="5"
cols="30"></textarea><br> <input type="Submit"
value="Simpan"> <input type="reset"
value="Reset"> </form> </body> </html> |
Hasil:
Membuat 2 Halaman
|
<html> <head> <meta name="viewport"
content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/> <script type="text/javascript"
src="jquery.js"></script> <script type="text/javascript"
src="jquery.mobile-1.4.5.min.js"></script> <title>191080200260</title> </head> <body> <div data-role="page"
id="hal1"> <div data-role="header"> <h1>Praktikum Web</h1> </div> <div data-role="content"> <p>Aplikasi Mobile Web</p> <a href="#hal2">Pindah ke
layar 2</a> </div> <div data-role="footer"> <h4>@Lab Pemrograman Web</h4> </div> </div> <div data-role="page"
id="hal2"> <div data-role="header"> <h1>UMSIDA</h1> </div> <div data-role="content"> <p>Isi dari halaman 2</p> <a href="#hal1">Kembali ke
layar 1</a> </div> <div data-role="footer"> <h4>© UMSIDA</h4> </div> </div> </body> </html> |
Hasil Hal1 :
Hasil Hal2 :
Membuat
List View Menu Vertikal
|
<html> <head> <link rel="stylesheet"
href="jquery.mobile-1.4.5.min.css"/> <script type="text/javascript"
src="jquery.js"></script> <script type="text/javascript"
src="jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript"></script> <title>Membuat List View/Menu Vertikal</title> <meta name="viewport"
content="width=device-width, initial-scale=1"> </head> <body> <div data-role="page" id="hal1"> <div data-role="content"> <div data-role="listview"
data-divider-theme="b" data-inset="true"> <li data-role="list-divider"
role="heading">Menu</li> <ul> <li data-theme="c"> <a href="#"
data-transition="slide">home</a> </li> <li data-theme="c"> <a href="#page1"
data-transition="slide">profile</a> </li> <li data-theme="c"> <a href="#page1"
data-transition="slide">contact</a> </li> </ul> </div> </div> </div> </body> </html> |
Hasil:
Komentar
Posting Komentar