Scribd
Unggah
120 tayangan

Modul Praktikum Web Programming 2 IYA

Diunggah oleh

Toriq Al Fahrezy
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
120 tayangan

Modul Praktikum Web Programming 2 IYA

Diunggah oleh

Toriq Al Fahrezy
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 45

MODUL PRAKTIKUM

Web Programming II

Disusun Oleh
Ika Yuniva, M.Kom

AMIK BSI TANGERANG


2018

1
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

2
DAFTAR ISI
PERTEMUAN MATERI HAL
1 dan 2 Mengenal Dreamweaver 4
Script PHP dalam Dreamweaver
Pembuatan Banner & Menus
3 dan 4 Membuat Input Data Barang 8
Membuat Database
Membuat Simpan Data Barang
5 dan 6 Membuat Halaman Tampil data Barang dan Ubah 13
Data Barang
7 dan 8 Membuat Script Update data barang , Hapus data 19
barang dan Script pencarian barang
9 Membuat FormLogin 21
10 dan 11 Membuat Front Page dan n 24
12 dan 13 Menampilkan data barang dengan teknik pagging 30
dan membuat keranjang belanja
14 Membuat Update cart, Hapus cart dan Pembuatan 36
struk
15 Membuat Template Website dengan Boostrap 39
16 Review Materi / Quiz

3
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>

4
 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/

5
 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:

6
 Tampilan Banner & Menu

7
PERTEMUAN 3 dan 4

Membuat Form Input Data Barang


Membuat Database
Membuat File Simpan Data Barang

8
 Membuat Database

Buat database dbtoko


Buat tabel barang

9
10
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().

11
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.

12
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

13
14
Cek di browser tampilannya

15
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

16
Test ubah-barang.php

17
TUGAS!!!
Buat halaman tampil-penguna.php &
ubah-pengguna.php
Simpan script di dalam folder admin

18
PERTEMUAN 7 dan 8

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

19
Tugas!!!
• Buat script untuk update-pengguna.php dan hapus-pengguna.php
• Buat script untuk pencarian data pengguna berdasarkan kode pengguna dan nama
pengguna

20
PERTEMUAN 9
Membuat Form Login

Form Login

21
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.

22
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

23
PERTEMUAN 10 dan 11
Membuat FrontPage dan Tampil Data Barang

Membuat SlideShow Menggunakan


aplikasi visual slideshow

24
25
26
27
Hasil Tampilan

28
29
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;

30
31
 Membuat Keranjang Belanja
Buat Table dengan nama cart dengan struktur sebagai berikut :

32
33
34
35
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

36
• Insert table

37
• Design struk seperti di bawah ini:

Tampilan Struk

38
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 :

39
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>

<!-- Bootstrap -->


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

<!-- HTML5 shim and Respond.js for IE8 support of


HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Custom CSS -->


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

</head>
<body>

<!--happy code-->

<!-- jQuery online menggunakan CDN -->


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

<!-- jQuery lokal -->


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

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

<!-- Custom JS -->


<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.

40
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">
<!-- Bagian Header -->
<div class="row">
<div class="col-md-12 header" id="site-header">
<!-- isi header -->
</div>
</div>
<!-- End Bagian Header -->

<!-- Bagian Wrapper 2 kolom -->


<div class="row">
<div class="col-md-8 articles" id="site-content">
<!-- isi content -->
</div>
<div class="col-md-4 sidebar" id="site-sidebar">
<!-- isi sidebar -->
</div>
</div>
<!-- End Bagian wrapper -->

<!-- Bagian footer -->


<div class="row">
<div class="col-md-12 footer" id="site-footer">
<!-- isi footer -->
</div>
</div>
<!-- End Bagian footer -->
</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>

41
<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>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">Lorem Ipsum</a></li>

42
<li><a href="#">Lorem Ipsum</a></li>
</ul>
</aside>

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

<footer class="copyright text-center"><p>&copy; 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;

43
background-color: #c0392b;
color: #fff;
}

article.posts {
padding: 10px 20px;
background-color: #fff;
margin-top: 20px;
}
aside.widgets {
padding: 10px 20px;
margin-top: 20px;
background-color: #fff;
}
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;
}

44
DAFTAR REFERENSI

www.dynamicdrive.com

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

http://www.getbootstrap.com

http://www.jquery.com

45

Anda mungkin juga menyukai