Panduan Web Programing untuk Pemula Oleh: Imam Ferianto

1

Panduan Web Programing untuk Pemula oleh: Imam Ferianto

Hari Pertama:

1.Pendahuluan

2.Tugas Proyek

3.Pembuatan Bisnis Proses Sederhana

4.Desain Database Mysql Menggunakan Tools Mikroolap

5.Cara Install dan Konfigurasi xampp

Hari Kedua:

6.Cara Menggunakan tools phpmyadmin

7.Desain Prototype UI dasar dan Pengenalan Koding PHP

8.Penambahan CSS Sederhana

9.Validasi Input dengan Javascript

Hari Ketiga:

10.Desain Layout Menggunakan Photoshop

11.Menggabungkan Kode PHP dan Desain Photoshop

12.Cara Mengupload File dan setting pada hosting

2

1.Pendahuluan

Web programing merupakan salah satu pemrograman yang berorientasi ganda, yaitu server programing

dan client programing.

Disisi client kita membangun UI dan Berbagai validasi dengan programing HTML,CSS,

Javascript/VBScript, Applet Java,Active X, Maupun Animasi Multimedia Flash.

Disisi server kita membangun backend yang terdiri dari scripting (ASP, .NET, PHP, JAVA, Perl, dll) serta

menangani proses yang berkaitan dengan input output, misalnya database (Mysql,MSSQL,Oracle,dll),

pembuatan report file (PDF,XML,XLS,DOC,dll)

Pada Sesi ini kita akan belajar Instant dan cepat , mengapa instant karena untuk belajar web

programming secara umum membutuhkan waktu lama, selain itu perkembangannya juga sangat pesat,

bermunculan banyak sekali bahasa dan standar baru. Sesi ini akan membahas seperti pada topik

bahasan diatas, serta cara membuat software berbasis web dengan mudah dan cepat, mudah disini

karena sebenarnya membuat software itu banyak sintak dan bahasa yang rumit, tetapi akan kita

permudah menggunakan tools tools instant yaitu: xampp (filezilla ftp server+apache webserver+mysql

database+php scripting engine+perl scripting engine).

Programing juga sebuah art, artinya dalam membuat program sebisa mungkin kita menyajikan layout

yang sedap dipandang mata (eyecatching), serta mudah dan tidak menimbulkan kerancuan dalam

memakainya untuk user yang belum pernah memakai software tersebut sekalipun. Sehingga dalam hal

ini perlu ada sebuah standarisasi layout dan tampilan yang menarik, ini akan kita bahas pada sesi

terahir yaitu tentang desain UI.

3

Berikut gambaran umum tentang bagaimana aplikasi web itu harus dibangun

Desain Grafis,CSS

HTML

Client Browser

Javascript,VBScript

Flash/Multimedia

Active X

Applet

Server Web

(apache,IIS,tomcat)

PHP

ASP/.Net

Perl

Ruby/TCL

Scri

pti

ng

Engi

ne

Java

Coldfusion/CFM

File

I/O

Database Server

Input/Output File

External Database Server

4

2.Tugas Proyek

Untuk lebih menguasai dan mencapai hasil yang optimal, maka kita akan membuat suatu project yang

akan kita terapkan pada training sesi ini. Project yang akan kita terapkan berikut adalah proyek

membuat sebuah toko penjualan online .

Untuk mewujudkan project kita, pertama kali yang harus dibuat adalah memahami bisnis proses yang

harus dikerjakan software. Untuk lebih mudahnya kita dapat menggunakan catatan atau diagram

sederhana, Flowchart, DFD maupun UML modeling. Untuk kasus yang sederhana biasanya penjelasan

proses menggunakan Flowchart lebih mudah, dan pada skala teoritis akademis biasanya cenderung

menggunakan DFD dan UML. Pada proses yang komplek misalnya pada skala besar software

development berorientasi object biasanya cenderung menggunakan UML, karena UML mensupport itu

lebih terhadap pemodelan proses. juga pada beberapa kasus dapat degenerate menjadi kerangka

sebuah struktur kode MVC (model view controller) misalnya java (menggunakan rational rose, netbean)

maupun PHP5 (menggunakan netbean, enterprise architect).

Dalam penyusunan Kerangka Berpikir Sebuah Bisnis Proses kita harus berpikir runut dari proses umum

ke proses detail, kemudian hubungan antar proses, sebuah bisnis proses yang sederhana dapat dibuat

dengan Diagram Alir (Flowchart), sedangkan pada UML biasanya diwujudkan dalam sequence yang

menjelaskan urutan kejadian rinci. Sedangkan pada DFD biasanya DFD level 1.

Penggambaran Bisnis Proses Secara Terstruktur

Bisnis Proses Flowchart DFD UML

Gambaran Sistem -System Flowchart DFD Level 0 (contect) Use Case

Proses Global -Conceptual Flowchart DFD Level 1 Class Diagram

Proses Detail -Detail Flowchart DFD level 2 Sequence Diagram

Collaboration Diagram

Activity Diagram

5

#Contoh Proses Flowchart Penjualan

Baiklah sekarang kita akan belajar membuat Bisnis Proses untuk penjualan pada toko online, dengan

urutan tahap sederhana dan cepat sebagai berikut:

1. Tentukan Topik Bahasan : Bisnis Proses Toko Online

2. Tentukan Semua Hal yang terlibat: Website, Consumen, CS/pemilik , StokBarang,Bank, Expedisi

3. Tentukan Keterlibatan (hubungan antar komponen tersebut menjadi sebuah proses) dan beri

penjelasan nama proses tersebut.

4. Tentukan proses awal dan proses ahir secara runut.

5. Tentukan arah proses (1 arah atau 2 arah dan respon yang diberikan untuk proses: sebuah

proses biasanya memerlukan input dan memberikan aksi output/respon)

6. Tentukan constraint (aturan dan batasan khusus) hubungan antar proses.

7. Detailkan proses-proses tersebut.

8. Buat UI yang diperlukan untuk tiap proses yang memerlukan input dan code untuk memproses

dan UI output yang dihasilkan dari tiap proses.

6

Gambaran Proses Toko Online Secara Sederhana

5.Penyiapan barang dari

gudang/order dari pabrik

Website

Konsumen

CS

Barang Expedisi

Bank

1.memesan

2.Pengecekan

Pesanan

4.Pengecekan

Pembayaran

(constraint)

6.Pengiriman

Barang

7.Barang Diterima

Konsumen

(proses selesai)

3.pembayaran

(transfer)

7

#Gambaran Dalam Bentuk DFD diagram contect

8

#Use Case Toko Online :

9

#Sequence Diagram

10

Mendetailkan dari tiap proses (scenario system) dari proses sederhana:

1.Pemesan barang :

1a.Backend

Barang yang dipesan harus terlebih dahulu display di website, maka system harus terlebih dulu

menyediakan daftar barang,gambar,detail, dan harga, disini berarti harus dibuatkan (1) backend

terproteksi dengan (2) login admin untuk menangani (3) penambahan item barang, (4) pengeditan harga

dan detail, maupun (5) penghapusan item yang sudah tidak dijual, (6) view untuk mendisplay barang

yang dijual.

1b.Customer View

Disisi lain harus juga tersedia proses untuk memesan barang, artinya barang yang sudah dipilih disimpan

dalam log (kerangjang) tiap-tiap konsumen. Disini system harus dapat membedakan konsumen yang

satu dengan yang lain. Maka perlu dibuatkan sebuah (1) proses pendaftaran member, didalam proses

pendaftaran ini harus ada pengecekan apakah sudah terdaftar atau belum, (2) proteksi dan pemisahan

data customer (3) system untuk login dan menyimpan detail yang sudah login, (4) system untuk

menambahkan item ke dalam keranjang yang sudah login, (5) menghapus pesanan barang yang tidak

jadi, (6) melakukan cekout atau kalkulasi semua biaya pesanan+ongkos kirimnya (kita dapat asumsikan

ongkos kirim menurut dareah kota tujuan dan berat total barang). Karena mekanisme pembayaran

adalah transfer maka pada langkah ini harus jelas Total Keseluruhan yang harus dibayar , (7) Info Nama

dan Nomor Rekening Bank tujuan, serta pesan bahwa setelah melakukan pembayaran harus login lagi

ke toko online dan melakukan konfirmasi pembayaran agar segera diproses (3.1), berarti di bagian

backend perlu ditambah (8) form edit info transfer, norekening, nama,bank, alamat toko, email CS,

pesan setelah cekout.

2.Pengecekan Pesanan

Bila ada pemesanan barang berarti tugas CS ataupun pemilik toko harus mengecek apakah barangnya

ready stok (misalkan katalog ready stok salah, tertera ready stok padahal habis), maka perlu

dikonfirmasikan lagi ke pembeli bahwa barang yang dipesan habis. Tetapi mekanisme yang dilakukan

pada beberapa toko online asumsinya biasanya semua barang yang tertera ready adalah harus benar

ready atau bagaimanapun bila ada pesanan barang, maka barang harus tersedia, jadi yang diperlukan

oleh pengelola toko adalah selalu mengecek persediaan dan mengupdate informasi barang apakah

ready stok ataukah ident. Bila barang ident, maka setelah klausa pembayaran barang dipesankan atau

dicarikan ke vendornya. Jadi step pengecekan barang ini bias dibypass , jadi dilakukan di sisi backend

pengecekan berkala. Kita akan menganggap CS akan merespon ketika ada konfirmasi transaksi

pembayaran saja.

3.Transfer pembayaran.

Pembayaran pada toko online dilakukan dengan transfer, karena kita tidak bisa menghubungkan

langsung system pembelian online dengan gateway informasi ATM maka diperlukan (1) system

11

konfirmasi pembayaran & pesanan barang agar segera diproses.

4.Penyiapan barang & Pengiriman barang

Proses penyiapan dan pengiriman barang pada toko online biasanya dijadikan 1 proses dengan output

utama adalah (1) notifikasi kepada customer bahwa barang telah dikirim dan kira-kira akan sampai pada

tanggal berapa.

5.Barang Diterima konsumen

Bila Barang sudah diterima konsumen maka berarti proses selesai, tetapi lain halnya bila barang belum

diterima, maka berarti konsumen perlu mengkonfirmasi kepada penjual bahwa barang belum diterima,

atau barang yang diterima tidak sesuai spesifikasi, ataupun customer mau memberikan testimony,

berarti kita perlu membuat (1) input form untuk complain masalah (a)pengiriman dan (b)komplain

barang yang diterima maupun (c) testimony.

#Resume Proses dan Form yang perlu dibuat :

Dari bahasan diatas, maka dapat diketahui halaman/form inputan dan proses yang harus dibuat yaitu:

No Kode Form/Proses Jenis Form

1 1a. (1) Proteksi backend Session cek 2 1a. (2) Login admin Input/query 3 1a. (3) form backend penambahan item barang Insert 4 1a. (4) form backend pengeditan harga dan detail Update 5 1a. (5) form backend penghapusan item yang sudah tidak dijual Delete 6 1a. (6) form backend view untuk mendisplay barang yang dijual View 7 1b. (1) form pendaftaran member Insert 8 1b. (2) proteksi dan pemisahan data customer Session cek 9 1b. (3) system untuk login dan menyimpan detail yang sudah login Input/query 10 1b. (4) system untuk menambahkan item ke dalam keranjang yang

sudah login Insert

11 1b. (5) menghapus pesanan barang yang tidak jadi Delete 12 1b. (6) proses cekout dan kalkulasi semua biaya pesanan+ongkos

kirimnya Insert

13 1b. (7) View Info Nama dan Nomor Rekening Bank tujuan, pesan setelah cekout

View

14 1b. (8) form edit info transfer, norekening, nama,bank, alamat toko, email CS, pesan setelah cekout.

Update

15 3. (1) system konfirmasi pembayaran & pesanan barang agar segera diproses.

Insert

16 4. (1) notifikasi kepada customer bahwa barang telah dikirim dan perkiraan akan sampai pada tanggal berapa.

Input,Query,output email

17 5. (1) input form untuk complain masalah (a)pengiriman dan (b)komplain barang yang diterima maupun (c) testimony.

Input

12

Selanjutnya adalah sesi praktek langsung

Silahkan mencatat , melihat dan mendengarkan dengan baik : )

13

#Setup Server Xampp

extract file: software.zip dan extract file: xampp-win32-1.7.7-VC9.zip yang ada didalamnya,

Cut folder xampp dan paste ke D:

14

#Jalankan Xampp-control.exe dan run (apache dan mysql)

15

#Merancang Database Toko Online Dengan Microolap

- Buka MikroOlap dan Klik New Diagram

- Kasih Nama Database: tokoonline

- Simpan diagram, beri nama: tokoonline.mdd

16

- Pilih Diagram Properties, set database option table type: innodb

- Set default table : innodb dan default datatype: varchar

17

-Klik Table dan Drop Ke Diagram Area

Klik Tanda Panah dan Klik Tabel 2x sampai muncul properties, dan kemudian diberi nama: barang

Table

Drop/Klik di area

1.Klik tanda Panah

2.Klik 2x pada table sampai muncul properties

Name: barang, Type: InnoDB

18

Add Field dan Beri Nama Field, Sesuaikan Typenya, Seperti Contoh Dibawah Ini:

#Desain Database TOko Online:

Catatan, untuk auto increment (key otomatis) Untuk Table :

#detail_pesanan, idedetail = int, primary key, auto_increment

#pesanan_barang, idpesanan = int, primary key, auto increment .

#konsumen, kode_konsumen= int, primary key, auto increment.

19

#Buat Relasi Database menggunakan Tool reference

#arahkan relasi dari table anak ke table induk, misal dari table anak dulu (pesanan _barang) dan table induknya adalah : konsumen

20

Klik Tanda Panah lagi, dan 2x pada relasi dan beri nama relasi: pesanan_konsumen

Klik pada tab (integrity), cek pilihan update Cascade dan delete restrict

21

#Buat Reference yang lain dan semua table sampai terbentuk relasi seperti berikut:

#Selanjutnya Generate SQL, Klik Menu Database -> Generate Database

22

Simpan File ke file/folder: D:\xampp\htdocs\toko\tokoonline.sql

(terlebih dulu buat folder D:\xampp\htdocs\toko ), cek create database dan drop database

Kemudian Klik : Generate Script

Klik Execute SQL

23

Jika database sudah server xampp sudah running maka database akan dibuat otomatis

#Buka Browser Firefox dan ketik http://localhost/phpmyadmin ,harusnya database tokoonline sudah

muncul:

#Buka Browser Firefox dan ketik http://localhost/toko

Harusnya muncul seperti dibawah ini, bila belum maka berarti folder d:\xampp\htdocs\toko

Belum dibuat!

24

25

#Membuat Layout Menggunakan Dreamweaver 8 -Buka Dreamweaver 8: klik 2x file : mcd-portable8.exe

-Tunggu Sampai Dreamweaver 8 Selesai Di load

kemudian klik menu : Site->New Site (bila belum ada) atau manage site (bila sudah ada)

26

27

28

29

Pastikan Pengisian Nama Folder tidak salah (keliru) !

30

31

32

Next dan perhatikan info summary harus seperti ini:

Kemudian klik done

33

Pilih Dynamic page, PHP, klik create

34

Ketik: isian dengan dalaman depan toko, kemudian simpan di folder

D:\xampp\htdocs\toko dengan nama : index.php

35

Buka Firefox dan ketik alamat:

http://localhost/toko , atau http://127.0.0.1/toko

Kemudian buka lagi dreamweaver dan buat Koneksi ke myql (pada application / bagian kanan )

Isikan Nama Koneksi : lokal1, server: localhost , username: root

36

Select (database), pilih tokoonline

BIla sudah klik Ok, dan OK lagi. Jika sudah terkoneksi dengan benar seharusnya muncul : Listtable

disebelah kanan:

Kita tutup file: index.php dan buat File ->New ->Dynamic page->PHP (seperti diatas) untuk halaman

admin. Simpan di d:\xampp\htdocs\toko\admin\index.php

(buat folder admin, bila belum ada! )

Isikan teks missal: ini halaman admin, dan simpan sebagai file: index.php (pada folder admin tsb)

37

#Buka Lagi Firefox dan ketik

http://localhost/toko/admin , harusnya muncul seperti berikut:

38

#Membuat Binding Recorset ,

Klik tab Binding dan Klik tanda +, pilih recordset query

Isikan dan Pilih Seperti dibawah ini dan tekan OK

Harus nya muncul di kanan seperti berikut:

39

Klik Record Insertion Wizaard: (Bila belum muncul record insertion wizard pada tab dropdown perlu

dipilih ke application

Pilih application

40

Isikan Detail Seperti dibawah ini dan klik OK

41

#hasilnya Harus seperti dibawah ini:

Properties tombol bisa diganti dengan yang user friendly missal: SIMPAN

42

#Membuat Record View (List)

Pilih Recorset: barang1 dan tekan OK

Harusnya muncul seperti berikut ini:

Kemudian Simpan: FileSave All

43

#Buka Firefox dan ketikan:

http://localhost/toko/admin

#Silahkan Coba Masukkan Kode,Barang,Nama,Stok dan Harga, harusnya Hasil akan muncul

dibawahnya, seperti berikut ini:

44

45

#SQL Database Toko Online: (lampiran 1)

-- ============================================================================= -- Diagram Name: tokoonline -- Created on: 02/10/2012 11:06:37 -- Diagram Version: -- ============================================================================= CREATE DATABASE IF NOT EXISTS `tokoonline`; USE `tokoonline`; SET FOREIGN_KEY_CHECKS=0; CREATE TABLE `admin` ( `loginid` varchar(50) NOT NULL, `password` varchar(50), `nama_admin` varchar(50), PRIMARY KEY(`loginid`) ) ENGINE=INNODB; CREATE TABLE `konsumen` ( `kode_konsumen` int(11) NOT NULL AUTO_INCREMENT, `nama_konsumen` varchar(50), `alamat_kirim` text, `nomor_hp` varchar(50), `email` varchar(100), `password` varchar(50), PRIMARY KEY(`kode_konsumen`) ) ENGINE=INNODB; CREATE TABLE `barang` ( `kode_barang` varchar(10) NOT NULL, `nama_ barang` varchar(50), `stok` int(11), `harga` int(11), PRIMARY KEY(`kode_barang`) ) ENGINE=INNODB; CREATE TABLE `pesanan_barang` ( `idpesanan` int(11) NOT NULL AUTO_INCREMENT, `tanggal_pemesanan` datetime, `kode_konsumen` int(11) NOT NULL DEFAULT '0', PRIMARY KEY(`idpesanan`),

46

CONSTRAINT `pesanan_konsumen` FOREIGN KEY (`kode_konsumen`) REFERENCES `konsumen`(`kode_konsumen`) ON DELETE RESTRICT ON UPDATE CASCADE ) ENGINE=INNODB; CREATE TABLE `detail_pesanan` ( `iddetail` int(11) NOT NULL AUTO_INCREMENT, `idpesanan` int(11) NOT NULL DEFAULT '0', `kode_barang` varchar(10) NOT NULL, `jumlah_pesanan` int(11), PRIMARY KEY(`iddetail`), CONSTRAINT `detailpesanan` FOREIGN KEY (`idpesanan`) REFERENCES `pesanan_barang`(`idpesanan`) ON DELETE RESTRICT ON UPDATE CASCADE, CONSTRAINT `barangdipesan` FOREIGN KEY (`kode_barang`) REFERENCES `barang`(`kode_barang`) ON DELETE RESTRICT ON UPDATE CASCADE ) ENGINE=INNODB; SET FOREIGN_KEY_CHECKS=1;