Pertemuan5

LAPORAN PERTEMUAN 5
PEMROGRAMAN WEB CLIENT
Disusun oleh :
Nur Khofifah
193110023
Rekayasa Perangkat Lunak Aplikasi
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AKAKOM
YOGYAKARTA
Praktik1 :Membuat file CSS
1. Aktifkan dulu server lokal. Bisa menggunakan XAMPP, SQLYog.
Disini saya menggunakan phpmyadmin sebagai server lokal dan langkah
awalnya adalah mengaktifkan XAMPP Control Panel dengan mengeklik tombol
start pada Apache dan MySQL
2. Semua File harus disimpan diserver.

Karena saya menggunakan phpmyadmin maka server lokalnya adalah xampp
di simpan di htdocs dan membuat folder baru bernama fifah ,semua file
simpan disitu apabila tidak disimpan maka program akan error
3. Ketikkan program berikut dan simpan dengan nama style.css
Pembahasan:
1. Menyimpan file tersebut dengan nama style.css ekstensi
css menandakan bahwa file tersebut berekstensi css
2. Membuat class container atau pembatas satu struktur
HTML dengan struktur lainnya dan class ini dapat dipanggil
berkali kali sesuai keinginan kita
.container{
width: 50%;
margin: 0 auto
3. Span yang di dalamnya akan diatur display block dan
margin button sebesar 20 px
span{
display: block;//tampilan diblok di kelas span
margin-bottom: 20px;//posisi bawah 20px
}
Secara default, display block yang tidak diberikan atribut

width akan mengambil lebar yang langsung memenuhi
layar. Dan kalau diberikan atribut width, layer tersebut
tidak akan memenuhi layar ke samping, tapi
mengosongkan ruang sisanya.
4. Membuat class success ,class ini dapat dipanggil berkali
kali sesuai keinginan tapi dalam form class ini digunakan
untuk atau jika program sukses dijalankan maka tulisannya
menjadi hijau dan bold
.success{//class success
display: block;//tampilan class ini di blok
margin-top: 20px;//posisi text rata atas dengan ukuran
20px
margin-bottom: 0;
font-size: 14px;//ukuran huruf pada class ini adalah
14px
b{
color: green;//warna bold atau tebal adalah hijau
}
5. Membuat class main atau utama dimana disini wadah atau
tempat dari semua yang berbentuk kotak dengan
ketentuan dibawah ini
div.main{
width: 306px;//ukuran dari kotak utama
padding: 10px 50px 30px;//jarak antara margin
dengan border
border: 2px solid gray;//ukuran border 2px
berwarna abu
float: left;//posisi di kiri
margin-top: 15px;//margin atas berukuran 15px
}
input[type=text]{//inputan betipe teks
width: 96%;//ukuran inputan
height: 25px;//berat dari inputan
border: 1px solid;//ukuran border di inputan
}
Pembahasan:
1. <?php //dokumen bertype php

2. if (isset($_POST['fnama'])) //sebagai kunci dengan method post
3. {
4. $fnama = $_POST['fnama']; //dekalarasi variabel fnama dengan method post
5. $lalamat =$_POST['lalamat']; //deklarasi variabel lalamat dengan method
post
6. echo "<span class='succes'>dengan<b>METODE POST</b></span><br/>";
//keluaran yang akan menampilan teks METODE POST ketika data yang di
inputkan benar
metode post adalah metode dimana pengiriman tidak terlihat
7. echo "Nama :".$fnama."<br/>Alamat:".$lalamat; //keluaran akan
menampilkan nilai dari nama dana lamat yang sudah di inputkan
8. }
9. if (isset($_GET['fnama'])) // sebagai kunci dengan method get
10.{
11.$fnama = $_GET['fnama']; //dekalarasi variabel fnama dengan method get
12.$lalamat = $_GET['lalamat'];// dekalarasi variabel fnama dengan method get
13.echo "<span class='success'>dengan<b>metode get
</b></span><br/>";//keluaran yang akan menampilan teks METODE GET
ketika data yang di inputkan benar
14.echo "Nama : ".$fnama."<br/>Alamat :".$lalamat; //keluaran akan

menampilkan nilai dari nama dan alamat yang sudah di inputkan
15.}
16.?> //tag penutup php
Pembahasan:
Perbedaan pengiriman data dengan method POST atau GET dapat dilihat pada
URL website. Jika menggunakan method GET maka data yang dikirim akan terlihat
sedangkan dengan method POST datanya tidak akan terlihat.
Modifikasi file index.phppadabaris no.9. Isikan method dengan POST.
amatikembalibagian URL.
Pembahasan:
1. <!DOCTYPE html> //membuat dokumen bertype html
2. <html> //tag membuka html
3. <head> //kepala html
4. <link rel="stylesheet" href="css/style.css"/> //link yang digunakan untuk
memanggil css
5. </head> //tag penutup kepala html
6. <body> //tag pembuka untuk body
7. <div class="container"> //deklarasi class dengan nama container
8. <div class="main"> //deklarasi class css dengan nama main
9. <form method="get" action="index.php" id="form"> //form ini akan di
tujuan ke proses.php dengan method yang digunakan method get.
10.<h2>DATA MAHASISWA</h2> //membuat teks DATA MAHASISWA
dengan ukuran ukuran h2
11.<hr> //membuat garis
12.<label>Nama :</label > //membuat label NAMA
13.<input type="text" name ="fnama" id="fnama" /> //menambahkan inut type
text pada label NAMA dengan variabel fnama
14.<label>Alamat :</label> //membuat label Alamat
15.<input type="text" name ="lalamat" id="lalamat" /> //menambahkan input
type text ada label alamat denagn variabel lalamat
16.<input type="submit" name="submit" id="submit"
value="Submit">//menambhakan button dengan input type submit
17.</form> //tag penutup form
18.<?php include "proses.php"; //pemanggilan proses.php
20.</div>
21.</div>
22.</div>
23.</body> //tag penutup body
24.</html> //tag penutup html
OUTPUT:
Pembahasan:
Perbedaan pengiriman data dengan method POST atau GET

dapat dilihat pada URL website. Jika menggunakan method GET
maka data yang dikirim akan terlihat sedangkan dengan
method POST datanya tidak akan terlihat.
Latihan
Pembahasan:
1. <!DOCTYPE html> //membuat dokumen bertype html
2. <html> //tag embuka html
3. <head> //kepala html
4. <link rel="stylesheet" href="css/style.css"/> //link yang digunakan untuk
memanggil css
5. </head> //tag penutup kepala html
6. <body> //tag pembuka untuk body
7. <div class="container"> //deklarasi class dengan nama container
8. <div class="main"> //deklarasi class css dengan nama main
9. <form method="get" action="index.php" id="form"> //form ini akan di
tujuan ke proses.php dengan method yang digunakan method get.
10.<h2>DATA MAHASISWA</h2> //membuat teks DATA MAHASISWA
dengan ukuran ukuran h2
11.<hr> //membuat garis
12.<label>Nama :</label > //membuat label NAMA
13.<input type="text" name ="fnama" id="fnama" /> //menambahkan inut type
text pada label NAMA dengan variabel fnama
14.<label>Alamat :</label> //membuat label Alamat
15.<input type="text" name ="lalamat" id="lalamat" /> //menambahkan input
type text ada label alamat denagn variabel lalamat
16.<label>NO HP :</label><br> //membuat label NO HP
17. <input type="number" name ="noo" id="noo" /><br> //menambahkan nput
type number dg variabel noo
18. <label>TGL LAHIR :</label><br> //membuat label TGL LAHIR
19. <input type="text" name ="llahir" id="llahir" /><br> //menambahkan input
type tetx dengan variabel llahir.
20.<input type="submit" name="submit" id="submit"
value="Submit">//menambhakan button dengan input type submit
21.</form> //tag penutup form
22.<?php include "proses.php"; //pemanggilan proses.php
24.</div>
25.</div>
26.</div>
27.</body> //tag penutup body
28.</html> //tag penutup html
Pembahasan:
1. <?php //dokumen bertype php
2. if (isset($_POST['fnama'])) //sebagai kunci dengan method post
3. {
4. $fnama = $_POST['fnama']; //dekalarasi variabel fnama dengan method post
5. $lalamat =$_POST['lalamat']; //deklarasi variabel lalamat dengan method
post
6. $noo = $_POST['noo']; //deklarasi variabel noo dengan method post
7. $llahir = $_POST['llahir']; //deklarasi variabel llahir dengan method post
8. echo "<span class='succes'>dengan<b>METODE POST</b></span><br/>";
//keluaran yang akan menampilan teks METODE POST ketika data yang di
inputkan benar
9. echo "Nama :".$fnama."<br/>Alamat:".$lalamat; //keluaran akan
menampilkan nilai dari nama dana lamat yang sudah di inputkan
10.}
11.if (isset($_GET['fnama'])) // sebagai kunci dengan method get
12.{
13.$fnama = $_GET['fnama']; //dekalarasi variabel fnama dengan method get
14.$lalamat = $_GET['lalamat'];// dekalarasi variabel fnama dengan method get
15.$noo = $_GET['noo']; //deklarasi variabel noo dengan method get
16.$llahir = $_GET['llahir']; //deklarasi variabel llahir dengan method get
17.
18.echo "<span class='success'>dengan<b>metode get
</b></span><br/>";//keluaran yang akan menampilan teks METODE GET
ketika data yang di inputkan benar
19.
20.echo "Nama : ".$fnama."<br/>Alamat :".$lalamat; //keluaran akan
menampilkan nilai dari nama dan alamat yang sudah di inputkan
21.}
OUTPUT:
Pembahasan:
Perbedaan pengiriman data dengan method POST atau GET dapat dilihat pada
URL website. Jika menggunakan method GET maka data yang dikirim akan terlihat
sedangkan dengan method POST datanya tidak akan terlihat
TUGAS
Simpan data form ke database
1. Membuat database diphp myadmin dengan nama database isian dan
membuat table dengan nama isiform digunakan untuk menyimpan form
yang telah diinputkan menggunakan metode post atau tidak terlihat dan
nantinya data tersebut akan muncul di phpmyadmin
2. Membuat table data dimana table ini digunakan agar form yang
dimasukkan ke database isian tersimpan di table isi form yang berisi Nama
yang bertipe varchar dengan panjang atau nilai 30,Alamat bertipe varchar
yang bernilai 20,No_Hp bertipe integer dengan panjang atau nilai
15,Tanggal_Lahir bertipe date ,yang harus diperhatikan adalah nama nama
field tersebut harus sama dengan kode program diproses.php
3. Membuat koneksi ke database phpmyadmin dengan nama koneksi1 yang

terhubung ke database isian
4. Mengirim data dengan metode post ,Selanjutnya kita akan membuat file
dengan nama data.php.dimana file ini berisi table yang didalamnya
terdapat data data orang” yang sudah mengisi form. File ini bertype
php.ketika kita sudah berhasil menginpitkan data seperti sebelumnya.kita
bisa mngecek apakah data benar” tersimpan dengan cara mengetikan
localhost/data.php.maka kita akan di arahkan ke halaman halaman data
tersebut.pada file ini kita akan menambahkan beberapa variabel yang
digunakan untuk menampilkan data. <?
1. <?php //merupakan dokumen bertype php

2. include ('koneksi.php'); //pertama kita membutuhkan koneksi ke
database, maka kita harus mengimpor file koneksi.php agar variabel $db
dapat dibaca.
3. if (isset($_POST['Nama'])){
4. $Nama=$_POST['Nama']; //untuk prosespenginputan dari variabel
nama dengan method post
5. $Alamat=$_POST['Alamat']; //proses penginputan variabel alamat
dengan method post
6. $No_hp=$_POST['No_hp']; // proses penginputan dengan variabel
no_hp dan method post $Tgl_lahir=$_POST['tgl_lahir']; // proses
penginputan data pada variabel tgl_lahir yang memiliki method post
7. $query=mysqli_query($koneksi,"insert into data
values('$nama','$alamat','$no_hp','$tgl_lahir')"); //menangkap data
yang dikirim oleh form.input kemudian kita input datanya ke database
dengan fungsi mysqli_query();
8. if ($query){ //seleksi jika query yang di inputkan benar
9. echo "berhasil input"; //maka akan di tampilkan keluaran berikut
10. }else{ //jika data yang diinputkan salah
11.echo "gagal"; maka akan keluar seperti ini.
5. sewaktu kita menginputkan data dan mengeklik submit maka data tersebut
akan langsung otomatis tersimpan di database isian karena sudah
terkoneksi pada program proses tadi
6. Apabila data yang kita sumitkan berhasil maka akan muncul tulisan di
bawah ini
7. Kemudian data yang sudah diinputan akan muncul di database isian dengan
nama table isiform seperti dibawah ini

Pertemuan5

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pertemuan5

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PERTEMUAN 5

PEMROGRAMAN WEB CLIENT

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

2. Semua File harus disimpan diserver.

Secara default, display block yang tidak diberikan atribut

1. <?php //dokumen bertype php

14.echo "Nama : ".$fnama."<br/>Alamat :".$lalamat; //keluaran akan

Perbedaan pengiriman data dengan method POST atau GET

3. Membuat koneksi ke database phpmyadmin dengan nama koneksi1 yang

1. <?php //merupakan dokumen bertype php

Anda mungkin juga menyukai