Irkham maulana s 3311401009 TB web
TUTORIAL DAN MANUAL BOOK PEMOGRAMAN WEB
TUTORIAL APP KASIR SEDERHANA
PERTAMA DALAM PEMBUATAN IALAH MEMERLUKAN SEBUAH DATABASE
UTK SCRIPT LENGKAPNYA SILAHKAN DOWNLOAD DI BAWAH.
JIKA SUDAH MEMBUAT DI NOTEPAD. MAKA ANDA HARUS IMPORT DI LOCALHOST/PHPMYADMIN
SETALAH MASUK LAMAN DATABASE . MAKA ANDA CUKUP UPLOD DATABASE YANG DI BUAT TADI. PADA IMPORT
KLIK CHOOSE FILE DAN PILIH FILE SQL KAMU TADI. TRGNTUNG LOKASI TEMPAT PENYIMPANAN.
LANGKAH 1: MEMBUAT TABEL MYSQL USER/PENGGUNA
UNTUK MEMBUAT DATABASE DAN TABEL, JALANKAN KODE BERIKUT DI SOFTWARE MYSQL ANDA, BISA MENGGUNAKANPHPMYADMIN ATAU SOFTWARE KESUKAAN SAYA HEIDISQL. UNTUK LEBIH JELAS TENTANG MEMBUAT DATABASE DAN TABEL MYSQL DENGAN SKRIP PHP, SILAHKAN KUNJUNGI TUTORIAL ” CARA MEMBUAT TABEL DAN DATABASE MYSQL DI PHP “.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
-- DUMPING DATABASE STRUCTURE FOR TES_DB
CREATE DATABASE IF NOT EXISTS `TES_DB` /*!40100 DEFAULT CHARACTER SET LATIN1 */;
USE `TES_DB`;
-- DUMPING STRUCTURE FOR TABLE TES_DB.KARYAWAN
CREATE TABLE IF NOT EXISTS `KARYAWAN` (
`ID_KARYAWAN` INT(10) NOT NULL AUTO_INCREMENT,
`PASS_KARYAWAN` VARCHAR(50) NOT NULL DEFAULT '0',
`USER_KARYAWAN` VARCHAR(50) NOT NULL DEFAULT '0',
`NAMA_KARYAWAN` VARCHAR(50) DEFAULT NULL,
`ALM_KARYAWAN` VARCHAR(50) DEFAULT NULL,
`GAJI_KARYAWAN` INT(10) DEFAULT NULL,
`TGL_GABUNG` DATE DEFAULT NULL,
PRIMARY KEY (`ID_KARYAWAN`)
) ENGINE=INNODB AUTO_INCREMENT=11 DEFAULT CHARSET=LATIN1;
-- DUMPING DATA FOR TABLE TES_DB.KARYAWAN: ~10 ROWS (APPROXIMATELY)
INSERT IGNORE INTO `KARYAWAN` (`ID_KARYAWAN`, `PASS_KARYAWAN`, `USER_KARYAWAN`, `NAMA_KARYAWAN`, `ALM_KARYAWAN`, `GAJI_KARYAWAN`, `TGL_GABUNG`) VALUES
(1, '1234', 'ADMIN', 'ADMIN NYEKRIP', 'WEBSITE', 3000000, '2015-04-16'),
(2, '4321', 'STAF', 'STAF NYEKRIP', 'SERVER WEB', 250000, '2015-04-16');
|
LANGKAH 2: MEMBUAT FORM LOGIN HTML
DALAM SKRIP INI KITA AKAN MEMBUAT FORM TEMPAT UNTUK MEMASUK-KAN USERNAME DAN PASSWORD. KETIK-KAN SKRIP BERIKUT UNTUK MEMBUAT FORM LOGIN DENGAN SKRIP HTML YANG TERDIRI DARI KOLOM USERNAME, KOLOM PASSWORD DAN TOMBOL SUBMIT. SIMPAN SKRIP BERIKUT DALAM FILE DENGAN NAMA INDEX.PHP. DALAM TUTORIAL INI KITA MENGGUNAKAN METODE POST, UNTUK LEBIH MEMAHAMI METODE FORM HTML, IKUTI TUTORIAL ” MEMBUAT FORM HTML DG POST DAN GET DI PHP “.
SKRIP HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<?PHP
INCLUDE('LOGIN.PHP'); // MEMASUK-KAN SKRIP LOGIN
IF(ISSET($_SESSION['LOGIN_USER'])){
HEADER("LOCATION: PROFILE.PHP");
}
?>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>NYEKRIP FORM LOGIN</TITLE>
<!-- SKRIP CSS -->
<LINK REL="STYLESHEET" HREF="STYLE.CSS"/>
</HEAD>
<BODY>
<DIV CLASS="CONTAINER">
<DIV CLASS="MAIN">
<FORM ACTION="" METHOD="POST">
<H2>NYEKRIP.COM FORM LOGIN DENGAN PHP</H2><HR/>
<LABEL>USERNAME :</LABEL>
<INPUT ID="NAME" NAME="USERNAME" PLACEHOLDER="USERNAME" TYPE="TEXT">
<LABEL>PASSWORD :</LABEL>
<INPUT ID="PASSWORD" NAME="PASSWORD" PLACEHOLDER="**********" TYPE="PASSWORD">
<INPUT TYPE="SUBMIT" NAME="SUBMIT" ID="SUBMIT" VALUE="LOGIN">
</FORM>
</DIV>
</DIV>
</BODY>
</HTML>
|
LANGKAH 3: MEMBUAT SKRIP LOGIN
DALAM SKRIP INI KITA AKAN MEMBUAT SKRIP PHP YANG BERTUGAS UNTUK MEMULAI SESI (SESSION) DAN MEMERIKSA APAKAH USERNAME DAN PASSWORD YANG DIBERIKAN TERDAPAT DALAM TABEL KARYAWAN, JIKA DATA TIDAK DITEMUKAN AKAN MENAMPILKAN PESAN ” USERNAME ATAU PASSWORD BELUM TERDAFTAR “. KETIK-KAN SKRIP BERIKUT DAN SIMPAN DALAM FILE DENGAN NAMA LOGIN.PHP.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<?PHP
SESSION_START(); // MEMULAI SESSION
$ERROR=''; // VARIABEL UNTUK MENYIMPAN PESAN ERROR
IF (ISSET($_POST['SUBMIT'])) {
IF (EMPTY($_POST['USERNAME']) || EMPTY($_POST['PASSWORD'])) {
$ERROR = "USERNAME OR PASSWORD IS INVALID";
}
ELSE
{
// VARIABEL USERNAME DAN PASSWORD
$USERNAME=$_POST['USERNAME'];
$PASSWORD=$_POST['PASSWORD'];
// MEMBANGUN KONEKSI KE DATABASE
$CONNECTION = MYSQL_CONNECT("LOCALHOST", "ROOT", "");
// MENCEGAH MYSQL INJECTION
$USERNAME = STRIPSLASHES($USERNAME);
$PASSWORD = STRIPSLASHES($PASSWORD);
$USERNAME = MYSQL_REAL_ESCAPE_STRING($USERNAME);
$PASSWORD = MYSQL_REAL_ESCAPE_STRING($PASSWORD);
// SELEKSI DATABASE
$DB = MYSQL_SELECT_DB("TES_DB", $CONNECTION);
// SQL QUERY UNTUK MEMERIKSA APAKAH KARYAWAN TERDAPAT DI DATABASE?
$QUERY = MYSQL_QUERY("SELECT * FROM KARYAWAN WHERE PASS_KARYAWAN='$PASSWORD' AND USER_KARYAWAN='$USERNAME'", $CONNECTION);
$ROWS = MYSQL_NUM_ROWS($QUERY);
IF ($ROWS == 1) {
$_SESSION['LOGIN_USER']=$USERNAME; // MEMBUAT SESI/SESSION
HEADER("LOCATION: PROFILE.PHP"); // MENGARAHKAN KE HALAMAN PROFIL
} ELSE {
$ERROR = "USERNAME ATAU PASSWORD BELUM TERDAFTAR";
}
MYSQL_CLOSE($CONNECTION); // MENUTUP KONEKSI
}
}
?>
|
LANGKAH 4 : MEMBUAT HALAMAN PROFIL
HALAMAN PROFIL
JIKA LOGIN TELAH BERHASIL, MAKA PENGGUNA AKAN DIARAHKAN LANGSUNG KE HALAMAN PROFILE YANG BERISI DATA PRIBADI USER (LIHAT GAMBAR HALAMAN PROFIL DIATAS). DALAM HALAMAN INI JUGA DILENGKAPI DENGAN LINK LOGOUT UNTUK KELUAR DARI HALAMAN SEKALIGUS MENGHAPUS SESSION. KETIK-KAN SKRIP BERIKUT DAN SIMPAN DALAM FILE DENGAN NAMA PROFILE.PHP.
SKRIP PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?PHP
INCLUDE('SESSION.PHP');
?>
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>NYEKRIP HALAMAN KHUSUS</TITLE>
<LINK HREF="STYLE.CSS" REL="STYLESHEET" TYPE="TEXT/CSS">
</HEAD>
<BODY>
<DIV ID="PROFILE">
<B ID="WELCOME">SELAMAT DATANG : <I><?PHP ECHO $LOGIN_SESSION; ?></I></B>
<B ID="LOGOUT"><A HREF="LOGOUT.PHP">LOG OUT</A></B>
</DIV>
</BODY>
</HTML>
|
LANGKAH 5: MEMBUAT SKRIP FUNGSI SESSION PHP
SKRIP INI BERTUGAS UNTUK MENGAMBIL DATA TENTANG USER DAN MENAMPILKAN-NYA PADA HALAMAN PROFIL. KETIK-KAN SKRIP BERIKUT DAN SIMPAN DALAM FILE DENGAN NAMA SESSION.PHP.
SKRIP PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?PHP
// MEMBANGUN KONEKSI DENGAN SERVER DENGAN NAMA SERVER, USER_ID DAN PASSWORD SEBAGAI PARAMETER
$CONNECTION = MYSQL_CONNECT("LOCALHOST", "ROOT", "");
// SELEKSI DATABASE
$DB = MYSQL_SELECT_DB("TES_DB", $CONNECTION);
SESSION_START();// MEMULAI SESSION
// MENYIMPAN SESSION
$USER_CHECK=$_SESSION['LOGIN_USER'];
// AMBIL NAMA KARYAWAN BERDASARKAN USERNAME KARYAWAN DENGAN MYSQL_FETCH_ASSOC
$SES_SQL=MYSQL_QUERY("SELECT NAMA_KARYAWAN FROM KARYAWAN WHERE USER_KARYAWAN='$USER_CHECK'", $CONNECTION);
$ROW = MYSQL_FETCH_ASSOC($SES_SQL);
$LOGIN_SESSION =$ROW['NAMA_KARYAWAN'];
IF(!ISSET($LOGIN_SESSION)){
MYSQL_CLOSE($CONNECTION); // MENUTUP KONEKSI
HEADER('LOCATION: INDEX.PHP'); // MENGARAHKAN KE HOME PAGE
}
?>
|
LANGKAH 6: MEMBUAT SKRIP FUNGSI LOGOUT PHP
SKRIP INI BERTUGAS UNTUK MENGHAPUS SEMUA SESI DAN LANGSUNG MENGARAHKAN KE HALAMAN UTAMA (INDEX.PHP) TEMPAT FORM LOGIN BERADA. KETIK-KAN SKRIP BERIKUT DAN SIMPAN DALAM FILE DENGAN NAMA LOGOUT.PHP.
SKRIP PHP
1
2
3
4
5
6
7
|
<?PHP
SESSION_START();
IF(SESSION_DESTROY()) // MENGHAPUS SESSIONS
{
HEADER("LOCATION: INDEX.PHP"); // LANGSUNG MENGARAH KE HOME INDEX.PHP
}
?>
|
LANGKAH 7: MEMBUAT SKRIP CSS UNTUK STYLE FORM LOGIN
SKRIP CSS INI UNTUK MEMBERIKAN DAN MENGATUR STYLE HTML PADA HALAMAN FORM LOGIN DAN HALAMAN PROFIL. KETIK-KAN SKRIP BERIKUT DAN SIMPAN DALAM FILE DENGAN NAMA STYLE.CSS.
SKRIP CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
.CONTAINER {
WIDTH: 50%;
MARGIN: 0 AUTO;
}
H2{
BACKGROUND-COLOR: #53BD84;
PADDING: 30PX 35PX;
MARGIN: -10PX -50PX;
TEXT-ALIGN:CENTER;
COLOR: #FFF;
}
SPAN{
DISPLAY: BLOCK;
MARGIN-BOTTOM: 20PX;
COLOR: RED;
}
.SUCCESS{
DISPLAY: BLOCK;
MARGIN-TOP: 20PX;
MARGIN-BOTTOM: 0;
FONT-SIZE: 14PX;
}
B{
COLOR:GREEN;
}
HR{
MARGIN: 10PX -50PX;
BORDER: 0;
BORDER-TOP: 1PX SOLID #CCC;
MARGIN-BOTTOM: 25PX;
}
DIV.MAIN{
WIDTH: 306PX;
PADDING: 10PX 50PX 30PX;
BORDER: 2PX SOLID GRAY;
FONT-FAMILY: RALEWAY;
FLOAT:LEFT;
MARGIN-TOP:15PX;
}
INPUT[TYPE=TEXT]{
WIDTH: 96%;
HEIGHT: 25PX;
PADDING: 5PX;
MARGIN-BOTTOM: 25PX;
MARGIN-TOP: 5PX;
BORDER: 2PX SOLID #CCC;
COLOR: #53BD84;
FONT-SIZE: 16PX;
}
INPUT[TYPE=PASSWORD]{
WIDTH: 96%;
HEIGHT: 25PX;
PADDING: 5PX;
MARGIN-BOTTOM: 25PX;
MARGIN-TOP: 5PX;
BORDER: 2PX SOLID #CCC;
COLOR: #53BD84;
FONT-SIZE: 16PX;
}
LABEL{
COLOR: #53BD84;
TEXT-SHADOW: 0 1PX 0 #FFF;
FONT-SIZE: 14PX;
FONT-WEIGHT: BOLD;
}
INPUT[TYPE=SUBMIT]{
FONT-SIZE: 16PX;
BACKGROUND: LINEAR-GRADIENT(#53BD84 5%, #FFF 100%);
COLOR: #4E4D4B;
FONT-WEIGHT: BOLD;
CURSOR: POINTER;
WIDTH: 100%;
PADDING: 10PX 0;
OUTLINE:NONE;
}
#PROFILE {
PADDING:50PX;
BORDER:1PX SOLID GREY;
FONT-SIZE:20PX;
BACKGROUND-COLOR:#A2DED0;
}
#LOGOUT {
FLOAT:RIGHT;
PADDING:5PX;
BORDER:DASHED 1PX GRAY
}
A {
TEXT-DECORATION:NONE;
COLOR:#6495ED
}
I {
COLOR:#6495ED
}
|
MANUAL BOOK APP KASIR SEDERHANA
INI ADALAH TAMPILAN AWAL FORM LOGIN
1. MASUKKAN NAMA MAHASISWA ,JURUSAN,DAN PASSWORD.
2. LALU TEKAN TOMBOL JOM MASUK
LALU AKAN KELUAR TAMPILAN SEPERTI DIATAS
3. TEKAN HALAMAN 2
4. TEKAN OK
5. INI ADALAH HALAM UTAMA (HOME)
6. LALU TEKAN DATA BARANG UNTUK MELAKUKAN TRANSAKSI
7. SETELAH ITU MASUKKAN ID.USER DAN KATA KUNCINYA
8. MENUM MESIN KASIR BERFUNGSI UNTUK MENGHITUNG TRANSAKSI.
9. MENU SETORAN KASIR BERFUNGSI UNTUK MENYETOR HASIL BELANJA
10. PADA MENU MANAJER TERDAPT MENU PEMBELIAN YANG BERFUNGSI UNTUK MEMASUKKAN APA SAJA YANG PEMBELIAN YANG DILAKUKAN OLEH TOKO.
11. MENU STOK BERFUNGSI UNTUK MENCARI DAN MENAMPILKAN STOK BARANG YANG TERSEDIA DI TOKO
12. MENU HARGA BARANG BERFUNGSI UNTUK MELIHAT HARGA DAN DAFTARN BARANG
13. MENU PENJUALAN BERFUNGSI UNTUK MELIHAT BARANG APA SAJA YANG DIJUAL
14. MENU PROFIL BERFUGSI UNTUK MELIHAT NAMA PENGGUNA YANG BISA MASUK
15. MENU UBAH PASSWORD BERFUNSGI UNTUK MENGUBAH PASSWORD
16. MENU TAMBAH USER UNTUK MENAMBAH USER
17. MENU KELUAR BERFUNGIS UNTUK KELUAR DARI MENU TRANSAKSI DATA BARANG.
18. LOG OUT SETELAH SELESAI TRANSAKSI.
20. LALU TEKAN KELUAR KLIK DI SINI
dan untuk mendownload full skrip ada di bawah ini
