modul praktikum web programming ii disusun oleh ika … · script html sederhana php (hypertext...

1

MODUL PRAKTIKUM

Web Programming II

Disusun Oleh

Ika Yuniva, M.Kom

AMIK BSI TANGERANG

2018

2

KATA PENGANTAR

Alhamdulillah segala puji bagi Allah SWT, yang telah memberikan rahmat dan

hidayahnya sehingga modul Web Programming II ini dapat terselesaikan dengan baik.

Selanjutnya modul ini disusun untuk memberikan gambaran bagi mahasiswa

yang mempelajari bahasa pemograman HTML, PHP dan membuat sebuah web ecommerce.

Tak lupa penulis mengucapkan terima kasih kepada semua pihak yang telah

membantu mendukung penulis sehingga modul ini dapat terselesaikan dengan baik.

Penulis menyadari masih banyak kekurangan dalam penyusunan modul ini.

Untuk itu saran dan kritik yang membangun sangat penulis harapkan guna perbaikan

dan pengembangan modul ini kedepan.

Akhir kata penulis berharap semoga modul Web Programming II ini dapat

dipergunakan sebaik-baiknya dan dapat dijadikan referensi untuk mahasiswa umum

yang ingin mempelajari pembuatan web.

Tangerang, Maret 2018

Penulis

3

DAFTAR ISI

PERTEMUAN MATERI HAL

1 dan 2 Mengenal Dreamweaver

Script PHP dalam Dreamweaver

Pembuatan Banner & Menus

4

3 dan 4 Membuat Input Data Barang

Membuat Database

Membuat Simpan Data Barang

8

5 dan 6 Membuat Halaman Tampil data Barang dan Ubah

Data Barang

13

7 dan 8 Membuat Script Update data barang , Hapus data

barang dan Script pencarian barang

19

9 Membuat FormLogin 21

10 dan 11 Membuat Front Page dan n 24

12 dan 13 Menampilkan data barang dengan teknik pagging

dan membuat keranjang belanja

30

14 Membuat Update cart, Hapus cart dan Pembuatan

struk

36

15 Membuat Template Website dengan Boostrap 39

16 Review Materi / Quiz

4

PERTEMUAN 1 dan 2

Mengenal Dreamweaver

Script PHP dalam Dreamweaver

Pembuatan Banner & Menus

Mengenal Dreamweaver

Dreamwweaver MX (MX 6, MX 7, MX 2004 dan MX 8) adalah suatu program editor

web yang dibuat oleh Macromedia dengan alamat Web site www.macromedia.com. Dengan

menggunakan program ini programmer web dapat dengan mudah membuat dan mendesain

web, karena bersifat WYSIWYG (What You See Is What You Get).

HTML

(Hyper Text Markup Language)

• HTML adalah bahasa standard untuk membuat halaman web statis.

• HTML dapat secara langsung dijalankan dan ditampilkan dengan bantuan browser.

• HTML dapat ditampilkan dalam bentuk objek tabel

Script HTML Sederhana

PHP (Hypertext Preprocessor)

1. PHP adalah bahasa pemrograman web yang dijalankan di server

2. PHP digunakan untuk membuat halaman dinamis

3. PHP dapat terhubung dengan database

4. PHP dapat membuat halaman web dengan HTML/javascript

5. PHP dijalankan oleh server sebelum halaman

Teknik Penulisan Script PHP

Dalam membuat program PHP diawali dengan start tag dan end tag:

• <? Skrip PHP Anda letakkan disini ?>

• <?php Skrip PHP Anda letakkan disini ?>

• <% Skrip PHP Anda letakkan disini %>

• <SCRIPT language=”php”> Skrip PHP Anda letakkan disini </SCRIPT>

5

Kriteria Penulisan Script PHP

1. Disimpan dengan Ekstensi PHP

2. Diawali dengan tag pembuka PHP dan diakhiri dengan tag penutup (?>)

3. Setiap baris skrip isi harus didahului pernyataan cetak.

Contoh: printf (“ Isi data ”);

printf ( isi data );

echo “ isi data “;

echo isi data

4. Setiap akhir baris di akhiri dengan titik koma (;)

<?

echo "AMIK Bina Sarana Informatika";

?>

5. Semua bentuk variabel harus diawali tanda dolar ($)

<?php

$var = ”AMIK Bina Sarana Informatika”;

echo ”Saya kuliah di $var”;

?>

6. Penulisan keterangan didahului dengan tanda pembuka (/*) dan diakhiri tanda (*/).

<?php

/* untuk menuliskan komentar yang informasinya sangat banyak atau berbentuk

kalimat panjang */

echo ”Nama saya AMIK Bina Sarana Informatika”;

?>

7. Penulisan komentar juga dapat menggunakan tanda slash ganda (//), tanda ini hanya

digunakan untuk menuliskan pesan yang informasinya satu baris saja.

<?php

//untuk menuliskan komentar 1 baris

echo ”Bina Sarana Informatika”;

?>

8. Skrip HTML yang akan digabungkan dalam skrip PHP harus menghilangkan tanda

petik ganda (”) dan dapat digantikan dengan tanda petik tunggal (’) atau

menghilangkannya.

contoh script HTML

<BODY bgcolor=”#009966”>

contoh script HTML dalam PHP

<BODY bgcolor=#009966>

Pembuatan Banner

Untuk pembuatan banner menggunakan aplikasi Aleo Flash Intro Banner Maker yang dapat

didownload di http://www.aleosoft.com/flash-intro-banner-maker/

http://www.aleosoft.com/flash-intro-banner-maker/

6

Pembuatan Menu

Untuk pembuatan menu dapat melihat contohnya di www.dynamicdrive.com

• Pilih menu CSS Library

• Pilih tampilan menu yg diinginkan, horizontal atau vertikal

Pembuatan Layout

Buat table dengan layout seperti berikut:

http://www.dynamicdrive.com/

7

Tampilan Banner & Menu

8

PERTEMUAN 3 dan 4

Membuat Form Input Data Barang

Membuat Database

Membuat File Simpan Data Barang

9

Membuat Database

Buat database dbtoko

Buat tabel barang

11

koneksi.php

• mysql_connect (Membuka koneksi ke server MySQL) Digunakan untuk melakukan uji

dan koneksi kepada server database MySQL

• mysql_select_db (Memilih database di server) Digunakan untuk melakukan koneksi

kepada database dalam server yang berhasil dikoneksi dengan perintah mysql_connect().

12

simpan-barang.php

Buat file baru dengan nama simpan-barang.php kemudian simpan dalam folder admin.

Script baris ke 10 digunakan bagi pengguna apache2triad, script baris ke 11 digunakan bagi

pengguna xampp.

• Setelah melakukan penginputan/penambahan data pada form tambah barang, cek di database

pada tabel barang apakah data yang sudah diinput sudah tersimpan atau belum. Selain cek

pada database, cek juga folder images apakah data gambar yang diinput sudah tercopy apa

belum.

13

PERTEMUAN 5 dan 6

Membuat Halaman Tampil Data Barang

Dan Ubah Data Barang

tampil-barang.php

• Buka file home.php

• Copy semua script di home.php

• Buat file baru, lalu paste script

15

Cek di browser tampilannya

16

Membuat halaman ubah-barang.php

• Dikarenakan ubah-barang.php dan input-barang.php tampilannya sama maka untuk ubah-

barang.php kita copy aja dari input-barang.php

• Copy script input-barang.php

• Buat file baru, lalu paste

17

Test ubah-barang.php

18

TUGAS!!!

Buat halaman tampil-penguna.php &

ubah-pengguna.php

Simpan script di dalam folder admin

19

PERTEMUAN 7 dan 8

Membuat Script update-barang.php, hapus-barang.php dan Script pencarian barang

20

Tugas!!!

• Buat script untuk update-pengguna.php dan hapus-pengguna.php

• Buat script untuk pencarian data pengguna berdasarkan kode pengguna dan nama

pengguna

21

PERTEMUAN 9

Membuat Form Login

Form Login

22

Form Login Menggunakan SESSION

Autentikasi adalah suatu mekanisme untuk mengatur hak akses halaman web, biasanya diawali

dengan proses login. Dimana user diminta menginput user id dan password. Jika berhasil login

anda berhak masuk ke suatu halaman, jika tidak anda tidak akan bisa masuk ke halaman

tersebut. Session adalah sebuah varibel sementara yang diletakkan di server. Di mana PHP bisa

mengambil nilai yang tersimpan di server walaupun kita membuka halaman baru. Biasanya

session akan hilang jika anda menutup browser.

23

Setelah anda menambahkan script di home.php tadi, maka halaman home.php tidak dapat

diakses sebelum user melakukan login.

Begitu terdeteksi user yang mengakses halaman home.php tanpa login, maka akan muncul

pesan sbb:

Cara Un-Register Session (Log Out)

• Nilai session ini akan terhapus otomatis begitu browser ditutup atau keluar dari browser.

• Cara lain adalah dengan menggunakan perintah session_destroy() atau

unset($_SESSION['nama session']).

• Buat file baru dengan nama logout.php dan simpan dalam folder admin

24

PERTEMUAN 10 dan 11

Membuat FrontPage dan Tampil Data Barang

Membuat SlideShow Menggunakan

aplikasi visual slideshow

28

Hasil Tampilan

30

PERTEMUAN 12 dan 13

Menampilkan Data Barang dengan Teknik Paging dan Keranjang Belanja

Teknik Paging

• Paging juga dikenal dengan sebutan pagination (paginate), previous-next, tampilan per

halaman, page navigator, halaman 1.. 2..3.., dst.

• Paging adalah teknik untuk membatasi data yang akan ditampilkan dalam suatu halaman

web

• Biasanya paging digunakakn untuk menampilkan data yang banyak

Logika Teknik Paging

Yang peru dipahami:

• Posisi data yang ada di database

• Limit (batas) untuk menentukan berapa data yang akan ditampilkan

Sintaks:

SELECT*FROM nama_tabel LIMIT posisi,batas;

32

Membuat Keranjang Belanja

Buat Table dengan nama cart dengan struktur sebagai berikut :

36

PERTEMUAN 14

Update Cart, Hapus Cart dan Pembuatan Struk

update.php

• Simpan dengan nama update.php di dalam folder tokobaju

hapusdata.php

• Simpan dengan nama hapusdata.php di dalam folder tokobaju

struk.php

Insert – Table

• Sisipkan script di dalam kotak

37

• Insert table

38

• Design struk seperti di bawah ini:

Tampilan Struk

39

PERTEMUAN 15

Membuat Template Website dengan Bootsrap

Membuat Template Website dengan bootstrap

Persiapan membuat template dengan bootstrap

1. Silahkan download source code bootstrap di situs resminya getbootstrap.comyang disediakan

oleh bootstrap secara gratis untuk diunduh oleh siapa saja.

2. Download jquery di jquery.com atau library google. karena bootstrap tidak

menyediakan jquery dalam paketan source code-nya. Jquery ini digunakan untuk

menjalankan komponen-komponen bawaan bootstrap seperti modal dialog, navigation agar

berjalan dengan normal.

3. Pastikan kalian sudah punya code editor seperti notepad++, dreamweaver atau Sublime Text

yang nanti akan kita gunakan untuk membuat template website dengan bootstrap.

4. Agar lebih terasa bawa kita membuat website, kita akan menggunakan xamppdan file

dengan extention php dalam membuat template website ini.

Memulai membuat template web

1) Pastikan XAMPP sudah terinstall dan sudah dalam kondisi running.

2) Buat sebuah folder di htdocs dengan nama template

3) Buka folder template (baru saja kita buat tadi) dan buatlah sebuah folder baru dengan

nama assets dan satu buat file dengan nama index.php

4) Buatlah dua folder baru di dalam folder assets dengan nama bootstrap danjquery.

Dimana hasil download-an bootstrap akan kita ekstrak di folder bootstrap yang baru kita

buat dan hasil download-an jquery akan kita letakkan di folder jquery yang baru kita

buat. Tambahkan dua file baru yaitu style.cssdan custom.js. Kurang lebih hasil dan

pembuatan struktur direktori websitenya adalah sebagai berikut :

http://getbootstrap.com/

http://jquery.com/

https://developers.google.com/speed/libraries/#jquery

40

Buka file index.php dan kita akan memulai membuat template websitenya dengan

menuliskan kode dibawah ini di file index.php.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Membuat Template Website Bootstrap</title>



<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">









<link href="assets/style.css" rel="stylesheet">

</head>

<body>





<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>



<script src="assets/jquery/jquery.min.js"></script>

<script src="assets/bootstrap/js/bootstrap.min.js"></script>



<script src="assets/custom.js"></script>

</body>

</html>

Dari script html di atas kita dapat melihat ada komentar tentang jquery lokal dan jquery

online maksudnya kita dapat memilih salah satu dari kedua jquery tersebut sesuka hati.

41

kita bisa menggunakan jquery online atau cdn dengan asumsi kitamembuat template

website dengan bootstrap ini dalam kondisi terhubung dengan internet, jika tidak

terhubung maka sebaiknya gunakan jquery lokal saja karena jquery online tidak dapat di

unduh jika dalam kondisi offline.

Langkah berikutnya adalah membuat layout website dengan bootstrap bagian header, content

dan sidebar serta footer dengan menambahkan kode berikut ini di atas komentar <!–

happy code–

<div class="container">



<div class="row">

<div class="col-md-12 header" id="site-header">



</div>

</div>





<div class="row">

<div class="col-md-8 articles" id="site-content">



</div>

<div class="col-md-4 sidebar" id="site-sidebar">



</div>

</div>





<div class="row">

<div class="col-md-12 footer" id="site-footer">



</div>

</div>



</div>

Kode baru di atas adalah kode yang akan membagi header, content, sidebar, dan footer. di dalam

system grid bootstrap total lebar layar atau lebar kerja diberi nilai 12 kolom.

Kita akan memulai mengisi bagian header dengan mengganti komentar <!– isi header–> dengan

kode berikut :

<header>

https://www.onphpid.com/belajar-membuat-template-web-menggunakan-bootstrap.html

https://www.onphpid.com/belajar-membuat-template-web-menggunakan-bootstrap.html

42

<h1 class="title-site">Belajar Bootstrap</h1>

<p class="description">Belajar Membuat Template Website Dengan Bootstrap</p>

</header>

<nav class="menus">

<ul>

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

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

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

</ul>

</nav>

kemudian kita akan mengisi kolom konten dengan mengganti komentar <!– isi content –>

dengan kode berikut :

<article

class="posts">

<h2 class="title-post">Lorem ipsum dolor sit amet</h2>

<div class="meta-post">

<span><em class="glyphicon

glyphicon-user"></em> Onphpid</span>

<span><em class="glyphicon

glyphicon-time"></em> 13 Juni 2015</span>

</div>

<div class="content">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nisi veniam

quibusdam amet, odit, odio consectetur ratione quod, cupiditate repellendus voluptatum.

Laudantium tempora, neque quo ex aspernatur veritatis sequi incidunt.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nisi veniam

quibusdam amet, odit, odio consectetur ratione quod, cupiditate repellendus voluptatum.

Laudantium tempora, neque quo ex aspernatur veritatis sequi incidunt.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis nisi veniamquibusdam

amet, odit, odio consectetur ratione quod, cupiditate repellendus voluptatum. Laudantium

tempora, neque quo ex aspernatur veritatis sequi incidunt.</p>

</div>

</article>

kemudian pada kolom sidebar silahkan ganti komentar <!– isi sidebar –> dengan kode

berikut :

<aside class="widgets">

<h3 class="widget-title">Latest Posts</h3>

<ul>

<li><a href="#">Lorem Ipsum</a></li>




43


</ul>

</aside>

kemudian pada bagian footer silahkan ganti <!– isi footer –> dengan kode berikut :

<footer class="copyright text-center"><p>© 2015 onphpid.com</p></footer>

dan untuk sentuhan terakhir kita akan memberikan style secara custom agar halaman kita

tampak lebih baik. silahkan tulis kode berikut di file style.css

body {

background-color: #e5e5e5;

}

.meta-post {

font-size: 12px;

margin-bottom: 10px;

}

.header header {

background-color: #fff;

padding: 10px 20px;

}

nav.menus {

background-color: #e74c3c;

padding: 10px;

}

nav.menus ul {

margin: 0;

padding: 0;

}

nav.menus ul li {

display: inline-block;

}

nav.menus ul li a {

display: block;

padding: 3px 7px;

color: #fff;

}

nav.menus ul li a:hover, nav.menus ul li a:focus{

text-decoration: none;

44

background-color: #c0392b;

color: #fff;

}

article.posts {

padding: 10px 20px;


margin-top: 20px;

}

aside.widgets {

padding: 10px 20px;

margin-top: 20px;


}

aside.widgets ul {

margin:0;

padding:0;

}

aside.widgets li {

list-style: none;

padding: 0;

margin:0;

}

.widget-title {

border-bottom: 4px solid #E74C3C;

padding-bottom: 4px;

}

footer.copyright {

padding: 10px 20px;

font-size: 12px;

}

45

DAFTAR REFERENSI

www.dynamicdrive.com


http://www.getbootstrap.com

http://www.jquery.com

http://www.dynamicdrive.com/


http://getbootstrap.com/

http://jquery.com/

modul praktikum web programming ii disusun oleh ika … · script html sederhana php (hypertext...

Documents