Showing posts with label progaming. Show all posts
Showing posts with label progaming. Show all posts

Tuesday, 9 June 2015

LUA let's say hello

Lua yang dalam bahasa indonesia berarti bulan adalah bahasa pemograman dinamis yang berbasis skrip.
Sebagai bahasa skrip, Lua memiliki API dalam bahasa C yang relatif lebih sederhana dibandingkan bahasa skrip lainnya.
Untuk permulaan tentu saja kita harus mengenal suasana kerja Lua, mari kita mulai dengan contoh klasik,
Tapi sebelum itu download terlebih dahulu Lua Binaries (dalam contoh ini untuk windows)
win32 bin
win32 dll and includes(MingW4 Compatoble)
ekstrak semua file lalu open lua5.1.exe, akan muncul command, mari kita tampilkan hello word...
untuk menampilkan text tidak jauh berbeda dengan pemograman lainnya yaitu menggunakan print
print("hello world") atau dapat menggunakan io.write("hello world \n")

berikut contoh lain eksekusi skrip lua :
buka cmd lalu arahkan pada direktori lua, kemudian load file lua yang berformat ".lua" seperti berikut
ini akan mengeksekusi file prima.lua yang berisi skrip :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function gen (n)
  return coroutine.wrap(function ()
    for i=2,n do coroutine.yield(i) end
  end)
end
 
function filter (p, g)
  return coroutine.wrap(function ()
    for n in g do
      if n%p ~= 0 then coroutine.yield(n) end
    end
  end)
end
 
N=N or 10
x = gen(N)       
while 1 do
  local n = x()       
  if n == nil then break end
  print(n)       
  x = filter(n, x)   
end

 
 
 Pada artikel ini saya akan memperkenalkan object table pada bahasa pemrograman Lua. Bagi Anda yang sudah familiar dengan pemrograman, tentu array merupakan hal yang tidak asing lagi. Demikian juga dengan Lua, bahasa pemrograman ini juga memiliki kemampuan menyimpan array yang diistilahkan dengan object table.
Table pada Lua sebenarnya bukan merupakan value ataupun variable, tetapi table merupakan object. Table juga tidak memiliki panjang yang telah ditentukan, artinya Anda dapat menambahkan elemen sebanyak mungkin dan panjang table akan otomatis bertambah secara dinamis. Langsung saja kita lihat bersama contoh implementasi table.
Cara deklarasi table di Lua:
Anda dapat mendeklarasikan object table dengan mudah di Lua seperti halnya membuat variable.
1
2
3
local tabelBuah = {}
--atau
tabelBuah = {}
Kode di atas mendeklarasikan table dengan nama "namaTabelSaya." Namun table tersebut belum memiliki elemen. Langkah berikutnya adalah mengisi table dengan values yang Anda kehendaki.
Cara mengisi table:
Untuk mengisi table pada Lua, cukup menggunakan kode  
1
table.insert(namaTable, values)
Contoh untuk mengisi tabelBuah yang telah Anda buat adalah:
1
2
3
4
table.insert(tabelBuah, "Mangga")
table.insert(tabelBuah, "Jeruk")
table.insert(tabelBuah, "Apel")
table.insert(tabelBuah, "Nanas")
Mudah sekali bukan? Namun table pada Lua memiliki kemampuan yang jauh lebih fleksibel dibandingkan array pada bahasa pemrograman lainnya. Sebagai contoh, Anda dapat mengisi element table menggunakan table. Sepertinya terdengar membingungkan, tetapi silakan lihat kode di bawah ini untuk lebih jelasnya.
1
2
3
4
5
6
local tabelBuahDanWarna = {}
 
table.insert(tabelBuahDanWarna, {nama="Mangga",warna="Hijau"})
table.insert(tabelBuahDanWarna, {nama="Jeruk",warna="Jingga"})
table.insert(tabelBuahDanWarna, {nama="Aple",warna="Merah"})
table.insert(tabelBuahDanWarna, {nama="Nanas",warna="Kuning"})
Kode di atas mendeklarasikan table baru dengan nama "tabelBuahDanWarna," masing-masing elemen berisikan table anonymous seperti {nama="Mangga",warna="Hijau"}. Perlu diketahui, Lua mendukung penggunaan object-object anonymous, termasuk function dan table anonymous. Dengan contoh di atas, setiap element "tabelBuahDanWarna" memiliki values berupa tabel berisi nama dan warna. Anda bebas menentukan identifier bagi setiap element table, pada contoh ini digunakan "nama" dan "warna."
Cara memanggil values table:
Setelah membuat table, tentu saja Anda ingin menggunakannya. Ada beberapa cara untuk memanggil element sebuah table, namun pada umumnya Anda juga ingin tahu berapa banyak element yang tersimpan di dalam table tersebut. Untuk mengetahui panjang table atau jumlah element, cukup gunakan kode:
1
#tabelBuah
Contoh di atas akan menghasilkan panjang table bernama tabelBuah. Apabila hasilnya ingin dicetak bisa menggunakan print(#tabelBuah)
Lalu untuk memanggil suatu element pada table, Anda bisa menggunakan cara-cara berikut:
1
2
3
4
5
6
7
8
9
10
11
12
--Variabel a digunakan untuk menampung element table yang Anda kehendaki
a = tabelBuah[2]
--Variable x berisi integer
x = 3
a = tabelBuah[x]
--Memanggil element terakhir suatu table
a = tabelBuah[#tabelBuah]
 
 
--Menggunakan atribut/member suatu tabel
a = tabelBuahDanWarna[1].nama
b = tabelBuahDanWarna[1].warna
Setelah memahami kode di atas, baru tampak fleksibilitas dari table Lua. Anda dapat memanipulasi table dengan mudah, menggunakan posisi maupun atribut/nama member (tabelBuahDanWarna).
Tidak berhenti sampai di situ, Anda juga bisa melakukan iterasi terhadap element-element suatu table, contohnya:
1
2
3
4
5
6
7
8
for i,buah in ipairs(tabelBuah) do
  print(i..". "..buah)
end
print("\n")
   
for i,buahDanWarna in ipairs(tabelBuahDanWarna) do
  print(i..". Nama: "..buahDanWarna.nama.."\tWarna: "..buahDanWarna.warna)
end
Code di atas akan mencetak setiap element yang dimiliki oleh tabelBuah dan tabelWarnaDanBuah. Model iterasi ini mirip dengan foreach pada bahasa pemrograman C#, hanya saja pada Lua, Anda mendapatkan nilai dari index iterator yang disimpan dalam variable i.
Source code lengkap tutorial:
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
local tabelBuah = {}
local tabelBuahDanWarna = {}
 
local initializeTable = function()
  -- Isi tabelBuah
  table.insert(tabelBuah, "Mangga")
  table.insert(tabelBuah, "Jeruk")
  table.insert(tabelBuah, "Apel")
  table.insert(tabelBuah, "Nanas")
   
  --Isi tabelBuahDanWarna
  table.insert(tabelBuahDanWarna, {nama="Mangga",warna="Hijau"})
  table.insert(tabelBuahDanWarna, {nama="Jeruk",warna="Jingga"})
  table.insert(tabelBuahDanWarna, {nama="Aple",warna="Merah"})
  table.insert(tabelBuahDanWarna, {nama="Nanas",warna="Kuning"})
end
 
main = function ()
  initializeTable()
   
  for i,buah in ipairs(tabelBuah) do
    print(i..". "..buah)
  end
   
  print("\n")
   
  for i,buahDanWarna in ipairs(tabelBuahDanWarna) do
    print(i..". Nama: "..buahDanWarna.nama.."\tWarna: "..buahDanWarna.warna)
  end
 
end
 
main() 
 
Posted by at No comments:
Labels:

Sang Array

Karena tulisan tentang awal menulis puisi (baca:ngoding) di iOS terhambat oleh upload image skrinsutnya, jadi saya akan nulis tutorial pendek. Semoga bermanfaat .
Kali ini saya akan mencoba menjelaskan tentang object array di Objective-C yang datang dalam dua bentuk, mutable dan immutable atau NSMutableArray dan NSArray, awalan NS di class-class cocoa framework berasal dari kata NextStep, kenapa NextStep, mungkin karena sejarah abang Jobs ajah :D .
skip...skip...skip...
perbedaan mutable dan tidak, intinya kalo mutable itu bisa dimodif (CMIIW).
Pertama kita buat objectnya,
1
2
3
NSArray *arraySatu = [NSArray arrayWithObjects:@"saya",@"minum",@"air",@"di wc"];
 
NSMutableArray *arrayDua = [NSMutableArray arrayWithObjects:@"saya",@"makan",@"daging",@"sapi"];
Mari kita cari tahu tentang berapa jumlah object yang ada di arraySatu, caranya mudah saja
1
NSLog (@"isi arraySatu berjumlah %d",[arraySatu count]);

nslog untuk menampilkan log di konsol XCode dan untuk menghitung jumlah isi dalam array tinggal [arraySatu count].
Setelah tau berapa isi array, mari kita coba edit si arrayDua (karena arraySatu immutable), kita ganti object pertama dengan kata lain. Caranya juga gampang, tinggal seperti ini
1
[arrayDua replaceObjectAtIndex:0 withObject:@"dia"];
Selanjutnya, mungkin kita coba tambahkan object baru ke dalam arrayDua
1
[arrayDua insertObject:@"rasa ayam" atIndex:4];
atau bisa seperti ini
1
[arrayDua addObject:@"bawang"];
setelah menambahkan, kita coba menghilangkan object di index tertentu, caranya seperti ini
1
[arrayDua removeObjectAtIndex:3];
atau kita ingin menghilangkan object "makan", maka caranya seperti ini
1
[arrayDua removeObject:@"makan"];<br>//atau<br>[arrayDua removeObjectIdenticalTo:@"makan"];
atau ingin mengosongkan array?
1
[arrayDua removeAllObjects];
Oh iya, untuk menampilkan isi object array, kita akses dengan fast enumeration (forin)
1
2
3
4
5
int i = 0;
for (NSString *kata in arrayDua){
    NSLog (@"isi index ke %d adalah %@", i, kata);
    i++;
{
sekian dulu artikel ini, nanti akan kita lanjutkan "menuangkan" array dari sini ke UITableView, sambil menunggu aplot-an skrinsut artikel dasarnya :D
Posted by at No comments:
Labels:

Web Aplikasi Inventori Sederhana Dengan CodeIgniter, MySQL &amp; Bootstrap [ UPDATED V.2 ]

Berawal dari tugas kerja praktek yang cukup membingungkan buat saya, yaitu pembuatan aplikasi inventori kontrol berbasis website. Akhirnya saya mendapat ilmu baru tentang bagaimana cara nya memanfaatkan Class Cart pada Framework CodeIgniter yang dapat membantu dalam proses inventori pada aplikasi Inventori Kontrol berbasis Web ini.
Sebagaimana umumnya, Class Cart tersebut banyak digunakan untuk pembuatan website toko online, namun ternyata bisa juga kita manfaatkan untuk aplikasi ini. Dan beberapa aplikasi lainnya yang membutuhkan temporary tabel pada database. Dengan Class Cart ini, kita dipermudah tanpa harus membuat tabel khusus temporary data pada database kita.
Contoh aplikasi lainnya yang dapat memanfaatkan Class Cart ini salah satunya adalah aplikasi Sistem Pakar. Dan setau saya aplikasi ini salah satu aplikasi favorit untuk judul Tugas Akhir mahasiswa Teknik Informatika.

Daripada kebanyakan basa-basi nya, langsung aja deh, saya berikan contoh aplikasi sederhana tentang inventori kontrol  berbasis website dengan menggunakan framework CodeIgniter dan memanfaatkan Class Cart yang ada didalamnya. Aplikasi ini sangatlah sederhana dan masih dapat dikembangkan kembali jauh lebih baik. Disini saya hanya ingin menunjukan bagaimana memanfaatkan Class Cart tersebut.  Semoga bisa membantu dan menambah sedikit ilmu lagi buat kalian, walaupun aplikasi ini masih 'Cupu'. Hehe.. 
Mohon Maaf, Berhubung ada masalah teknis pada domain yang lama dan juga file yg di upload ikutan hilang :'( , maka untuk demo saya berikan contoh aplikasi penjualan, ini sama2 menggunakan cart CI . Untuk demonya Login dengan username = admin, pass = admin 
* SYARAT WAJIB sebelum mempelajari pembuatan aplikasi ini, kalian harus sudah mengetahui (Minimal dasarnya) tentang Framework Codeigniter,agar lebih mempermudah.
Terima Kasih Atas Perhatiannya, Semoga bermanfaat...

UPDATE V.2
- Fixed Bugs
- Using Dynamic Base URL (Config)- Added Menu Laporan = Pencarian laporan berdasarkan tanggal yang kita pilih. 
Tolong diperhatikan.. setelah download, pastiin config CI nya dah bener sesuai standard. okeeeh.. kegagalalan karna config yang salah bukan tanggung jawab saya.. *halaah... 
Posted by at 2 comments:
Labels:

Tutorial Membuat Tabel Dengan Jquery Lengkap Dengan Pagination dan Pencarian


Selamat siang rekan- rekan yang hoby dengan PHP Programming.

Sebelumnya saya pernah membuat tabel dengan php murni, disana banyak kelemahannya salah satunya adalah codingnya terlalu banyak, kita butuh coding pencarian dan pagination, untuk itu kita harus menggunakan jquery " write less do more ".

Contoh kasus yang kita buat adalah :

Kampus saya yaitu STAIN BATUSANGKAR
1. Pastikan anda telah membuka phpmyadmin di browser.
2. Buatlah sebuah database dengan nama : dbstain
3. Buatlah tabel dengan nama tbl_mahasiswa dengan isi sebagai berikut :
Kolom                      Type
---------------------------------
nim                           int (8)
nama                       varchar (35)
tgl_lahir                   date
alamat                     text
prg_studi                varchar (35)

anda juga bisa mendownloadnya di link berikut : download dbstain

sebelumnya anda harus mempunyai plugin pendukung yang bisa anda download disini
Setelah file di atas selesai di download, buka dreamweaver buat index.php dan simpan di htdocs/thr/index.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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Data Mahasiswa</title>
<style type="text/css">
@import "media/css/demo_table_jui.css";
@import "media/themes/ui-lightness/jquery-ui-1.8.4.custom.css";
</style> 
<script src="media/js/jquery.js"></script>
        <script src="media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8">
          $(document).ready(function(){
            $('#datatables').dataTable({
                         "oLanguage": {
                              "sLengthMenu": "Tampilkan _MENU_ data per halaman",
                              "sSearch": "Silahkan Cari : ",
                              "sZeroRecords": "Maaf, tidak ada data yang ditemukan",
                              "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
                              "sInfoEmpty": "Menampilkan 0 s/d 0 dari 0 data",
                              "sInfoFiltered": "(di filter dari _MAX_ total data)",
                              "oPaginate": {
                                  "sFirst": "First",
                                  "sLast": "Last",
                                  "sPrevious": "Previous",
                                  "sNext": "Next"
                           }
                      },
              "sPaginationType":"full_numbers",
              "bJQueryUI":true
            });
          })   
        </script>
</head>
 
<body>
<table id="datatables" class="display">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>NIM</th>
                        <th>Nama Mahasiswa</th>
                        <th>Tanggal Lahir</th>
                        <th>Alamat</th>
                        <th>Program Studi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    mysql_connect("localhost","root","");
                    mysql_select_db("dbstain");
                              $sql = mysql_query("SELECT * FROM tbl_mahasiswa ORDER BY nim");
                              $no = 1;
                    while ($mhs = mysql_fetch_array($sql)) {
                      echo "<tr>
                            <td width=40>$no</td>
                            <td>$mhs[nim]</td>
                            <td>$mhs[nama]</td>
                            <td>$mhs[tgl_lahir]</td>
                            <td>$mhs[alamat]</td>
                            <td>$mhs[prg_studi]</td>
                            </tr>";
                      $no++;
                    }                   
                    ?>
                </tbody>
            </table>
</body>
</html>

Silahkan anda copy paste kode diatas untuk menggunakannya, berikut hasil dari kode di atas :

https://drive.google.com/file/d/0BzrB0alOdNDJb01WOTNsYWQ5dHc/edit?usp=sharing

Sekian tutorial yang dapat saya berikan, mungkin kata-kata saya masih ambigu
Posted by at No comments:
Labels:

Menampilkan Data MySQL dengan PHP


Hal yang paling umum pada saat kita belajar PHP adalah menampilkan data dari sebuah tabel dalam database. Nah berikut ini akan saya berikan panduan dasar untuk programmer pemula seperti saya:
1. Menampilkan data pada tabel
2. Menampilkan data baris zebra
Terlebih dahulu buat database Anda, contoh maful, lalu buatlah tabel dengan nama siswa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
CREATE TABLE IF NOT EXISTS `siswa` (
  `nim` varchar(5) NOT NULL,
  `nama` varchar(40) NOT NULL,
  `ipk` double NOT NULL,
  `jurusan` varchar(40) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
  
--
-- Dumping data untuk tabel `siswa`
--
  
INSERT INTO `siswa` (`nim`, `nama`, `ipk`, `jurusan`) VALUES
('M0002', 'Firman', 2.1, 'Ekonomi'),
('M0003', 'Gunawan', 3.71, 'Sistem Informasi'),
('M0004', 'Gunatri', 2.2, 'Pendidikan'),
('M0005', 'Fitria', 3.1, 'Teknik Mesin'),
('M0016', 'Zuhair', 2.5, 'Teknik Industri'),
('M0100', 'andri', 3.82, 'Psikologi');
Membuat script koneksi.php
1
2
3
4
5
6
7
define('db_host','localhost');
define('db_user','root'); //user database
define('db_pass',''); //passwd database
define('db_name','maful');
  
mysql_connect(db_host,db_user,db_pass);
mysql_select_db(db_name);
Jika semua diatas sudah dibuat, kita lanjutkan
Menampilkan data pada tabel
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
<h2>Menampilkan data di Tabel</h2>
    <table border="1" width="500px">
      <th><td>Nim</a></td><td>Nama</td><td>IPK</td><td>Jurusan</td></th>
  
<!-- example 1 :menampilkan data di tabel-->
<?php
  
require_once('koneksi.php');
$query1="select * from siswa ";
  
$result=mysql_query($query1) or die(mysql_error());
$no=1; //penomoran
while($rows=mysql_fetch_object($result)){
      ?>
      <tr>
        <td><?php echo $no
        ?></td>
        <td><?php    echo $rows -> nim;?></td>
        <td><?php    echo $rows -> nama;?></td>
        <td align='right'><?php    echo $rows -> ipk;?></td>
        <td><?php    echo $rows -> jurusan;?></td>
      </tr>
      <?php
$no++;
}?>
    </table>
Hasil dari code diatas adalah

Menampilkan Data Baris Zebra
Agar tampilannya sedikit lebih keren, maka kita buat lebih berwarna
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
<h2>
    Table Zebra strip
  </h2>
<table width="500px">
    <th><td>Nim</a></td><td>Nama</td><td>IPK</td><td>Jurusan</td></th>
<?php
$query2="select * from siswa ";
  
$result=mysql_query($query2) or die(mysql_error());
$no=1; //penomoran
$warna='#fffff';
while($rows=mysql_fetch_object($result)){
        
      if($no%2==1){
    $warna='#ece9d8';
  }else{
    $warna='#fff';
  }
  ?>
    <tr style='background-color: <?=$warna;?>'>
        <td><?php echo $no
        ?></td>
        <td><?php    echo $rows -> nim;?></td>
        <td><?php    echo $rows -> nama;?></td>
        <td align='right'><?php    echo $rows -> ipk;?></td>
        <td><?php    echo $rows -> jurusan;?></td>
      </tr>
      <?php
$no++;
}?>
    </table>
Semoga bermanfaat..
Posted by at No comments:
Labels:

Membuat Simple Online Messanger atau Chat dengan PHP, MySQL, JQuery, Bootsrtrap 3 dan Font Awesome 4


Episode “Design Sampul”
Asalamualaikum,
Dalam pembuatan Online Messanger atau Chat ini kita akan melakukanya secara berurutan sesuai dengan konsep CRUD (Creat, Read, Update, Delete)..
Tapi dalam tutorial pertama ini kita belum akan  melakukan CRUD karena kita akan memuali degan mendesign.
Sekarang kita akan membuat design awal untuk halaman index, halaman index disini nanti akan berisi form register, login dan deskripsi situs chat kita.
Di tahap ini kita akan menggunakan Bootstrap 3 dan font Awesome 4 untuk mempercantik tampilan dengan mudah..
Sekarang siapkan alat dan bahannya..
  1. Text editor.
  2. Browser.
  3. XAMPP atau server lain.
  4. JQuery. (http://code.jquery.com/jquery-1.11.1.min.js )
  5. Bootstrap 3. (https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip )
  6. Font Awesome 4. (http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.1.0.zip )
Setelah semua alat dan bahan sudah di dapatkan, saatnya kita mulai..
Langkah 1
Saya asumsikan anda sudah memasang XAMPP atau server lain..
Buka root direktori pada XAMPP folder bernama “htdocs” lalu buat sebuah folder project. Disini saya memberi contoh folder dengan nama “sms” atau saya sebut Simple Messanging System.
Selanjutnya kita buat folder “view” di dalam folder “sms”..
Lalu buat folder “bootstrap” dan “fa” didalam folder “view” sebagai wadah file dari Bootstrap 3 dan Font Awesome 4.
Lalu buat juga folder “css”, “js”, dan “images” untuk wadah file css, js, dan image yang mungkin akan kita perlukan nanti atau di tahap selanjutnya.
Hasil struktur foldernya seperti ini..

sms/
->view/
-->bootstrap/
-->css/
-->fa/
-->images/
-->js/


Langkah 2
sekarang extrak Bootstrap dan Font Awesome kedalam foldernya masing-masing yang telah kita buat tadi..
Bootstrap
 bootstrap

Font Awesome
 font awesome

Dan untuk JQuery, rename jquery-1.11.1.min.js dengan  jquery.min.js agar lebih simple..
lalu letakan jquery.min.js yang sudah di download di folder view/js/..

Langkah 3
Sekarang kita akan membuat beberapa file yaitu..
  1. index.php
  2. index_header.php
  3. index_footer.php
  4. index_style.css
buatlah file diatas sesuai struktur folder ini:

sms/
-index.php
-index_header.php
-index_footer.php
->view/
-->css/
---index_style.css


Langkah 4
Sekarang kita akan melakukan Coding untuk index_header.php dan index_footer.php sebagai struktur dasar..
Buka index_header.php dengan text editor..
Pastekan kode berikut, fungsi dari code sudah ada dalam komentar code..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- view port, melihat ukuran layar device -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Judul -->
    <title>Simple Messanging System</title>
    <!-- Bootstrap -->
    <link href="view/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="view/fa/css/font-awesome.min.css" rel="stylesheet">
    <!-- CSS anda -->
    <link href="view/css/index_style.css" rel="stylesheet">
</head>
<body>
Lalu save..

Buka index_footer.php dengan text editor..
Pastekan kode berikut, fungsi dari code sudah ada dalam komentar code..
1
2
3
4
5
6
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="view/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="view/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Lalu save..
Kenapa harus memotong kepala dan kaki index? Agar kelak jika kita membutuhkan kode yang sama kita tinggal mengincludekan potongang code itu...


Langkah 5
kita akan mulai mendesign,
saya akan membuat layout dengan tiga bagian yaitu untuk deskripsi, sign-in, dan sign-up..
Pastekan code berikut pada index.php, fungsi dari code sudah ada dalam komentar code..
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
<?php
//Memasukan File header
include_once'index_header.php';
?>
<div class="container-fluid" style="margin-top: 10%">
    <div class="row">
        <div class="col-md-4 col-md-offset-3">
            <!-- Deskripsi -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title"><i class="fa fa-3x fa-comments-o text-success"></i> Simple Messanging System [SMS]</h1>
                </div>
                <div class="panel-body">
                    Description
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <!-- Form Sign-in/Login/Masuk -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-2x fa-unlock-alt text-success"></i> Sign-In</h3>
                </div>
                <div class="panel-body">
                    Form
                </div>
            </div>
            <!-- Form Sign-up/Daftar -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-2x fa-paper-plane-o text-success"></i> Sign-Up</h3>
                </div>
 
                <div class="panel-body">
                    Form
                </div>
            </div>
        </div>
 
    </div>
</div>
<?php
//memasukan file footer
include_once'index_footer.php';
?>
Lalu save..

Langkah 6
Sekarang kita coba menampikan file yang kita design yang kita buat tadi..
Caranya, pastikan Apache pada XAMPP sudah Run..
Buka browser lalu kita ketikan alamat web kita pada address bar,
Disini saya menggunakan “localhost/sms”..
Jika berhasil akan tampil..
 1
Tapi saya tidak terlalu suka dengan background bodynya yang berwarna putih..
Saya akan ganti dengan warna hijau..
Caranya, buka file index_style.css yang telah dibuat di langkah 3 tadi, lalu edit background body dengan code ini..
1
body{background: #88C425}
lalu save.
kemudian Refresh browser, jika berhasil akan seperti ini..
2


Langkah 7
Sekarang kita akan membuat form untuk Sign-in.
Kita akan membuat 3 componen input yaitu:
  1. input text username
  2. input text password
  3. button submit sign-in
kita buat dengan cara..
Buka index.php, cari komentar <!-- Form Sign-in/Login/Masuk -->.
Ganti tulisan “Form” di bawah komentar code dengan code berikut.
1
2
3
4
5
6
7
8
9
10
11
<form action="" method="post">
                        <div class="form-group">
                        <label for="in-username">Username</label>
                        <input id="in-username" type="text" name="in-username" class="form-control" maxlength="15">
                            </div>
                        <div class="form-group">
                        <label for="in-password">Password</label>
                        <input id="in-password" type="password" name="in-password" class="form-control">
                            </div>
                            <button type="submit" name="sign-in" value="go" class="btn btn-success pull-right"><i class="fa fa-unlock"></i> OK</button>
                    </form>
Lalu save

Langkah 8
Sekarang kita akan membuat form untuk Sign-up.
Kita akan membuat 6 componen input yaitu:
  1. input text username
  2. input text nama
  3. input text email
  4. input text password1
  5. input text password2
  6. button submit sign-up
kita buat dengan cara..
Buka index.php, cari komentar <!-- Form Sign-up/Daftar -->.
Ganti tulisan “Form” di bawah komentar code dengan code berikut.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <form action="" method="post">
        <div class="form-group">
            <label for="up-username">Username</label>
            <input id="up-username" type="text" name="up-username" class="form-control" maxlength="15">
</div>
        <div class="form-group">
            <label for="up-name">Nama Lengkap</label>
            <input id="up-name" type="text" name="up-name" class="form-control" maxlength="50">
        </div>
        <div class="form-group">
            <label for="up-email">Email</label>
            <input id="up-email" type="email" name="up-email" class="form-control" maxlength="70">
        </div>
        <div class="form-group">
            <label for="up-password1">Password</label>
            <input id="up-password1" type="password" name="up-password1" class="form-control">
        </div>
        <div class="form-group">
            <label for="up-password2">Ulangi Password</label>
            <input id="up-password2" type="password" name="up-password2" class="form-control">
        </div>
        <button type="submit" name="sign-up" value="go" class="btn btn-success pull-right"><i class="fa fa-send"></i> Send Data</button>
    </form>
Lalu save.

Ini adalah full code dari index.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
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
<?php
//Memasukan File header
include_once'index_header.php';
?>
<div class="container-fluid" style="margin-top: 5%">
    <div class="row">
        <div class="col-md-5 col-md-offset-2">
            <!-- Deskripsi -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title"><i class="fa fa-3x fa-comments-o text-success"></i> Simple Messanging System [SMS]</h1>
                </div>
                <div class="panel-body">
                    <img src="view/images/icon.png" class="img-responsive center-block">
                    Membuat Simple Messanging system..
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <!-- Layout Sign-in/Login/Masuk -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-2x fa-lock text-success"></i> Sign-In</h3>
                </div>
                <div class="panel-body">
                    <!-- Form Sign-in/Login/Masuk -->
                    <form action="" method="post">
                        <div class="form-group">
                        <label for="in-username">Username</label>
                        <input id="in-username" type="text" name="in-username" class="form-control" maxlength="15">
                            </div>
                        <div class="form-group">
                        <label for="in-password">Password</label>
                        <input id="in-password" type="password" name="in-password" class="form-control">
                            </div>
 
                        <button type="submit" name="sign-in" value="go" class="btn btn-success pull-right"><i class="fa fa-unlock"></i> OK</button>
 
 
                    </form>
                </div>
            </div>
            <!-- Layout Sign-up/Daftar -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-2x fa-paper-plane-o text-success"></i> Sign-Up</h3>
                </div>
 
                <div class="panel-body">
                    <!-- Form Sign-up/Daftar -->
                    <form action="" method="post">
                        <div class="form-group">
                            <label for="up-username">Username</label>
                            <input id="up-username" type="text" name="up-username" class="form-control" maxlength="15">
                </div>
                        <div class="form-group">
                            <label for="up-name">Nama Lengkap</label>
                            <input id="up-name" type="text" name="up-name" class="form-control" maxlength="50">
                        </div>
                        <div class="form-group">
                            <label for="up-email">Email</label>
                            <input id="up-email" type="email" name="up-email" class="form-control" maxlength="70">
                        </div>
                        <div class="form-group">
                            <label for="up-password1">Password</label>
                            <input id="up-password1" type="password" name="up-password1" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="up-password2">Ulangi Password</label>
                            <input id="up-password2" type="password" name="up-password2" class="form-control">
                        </div>
 
 
                        <button type="submit" name="sign-up" value="go" class="btn btn-success pull-right"><i class="fa fa-send"></i> Send Data</button>
 
 
                    </form>
                </div>
            </div>
        </div>
 
    </div>
</div>
<?php
//memasukan file footer
include_once'index_footer.php';
?>

Langkah 9
Kita coba tampilkan design form yang telah kita buat di browser.
Caranya, masukan link web kita pada address bar. Disini saya menggunakan “localhost/sms”..
Jika berhasil tampilannya seperti ini..
 3
Deskripsi secara optional dapat anda ubah sesuka hati dengan menyisipkan gambar atau apapun..

SELESAI Design Sampul..

 
Episode System Sign-Up/Registerasi/Daftar User
Asalamualaikum,
Setelah di part 1 kita telah membuat form untuk Sign-in dan Sign-up yang sekarang kita akan membuat form itu dapat berfungsi untuk memasukan data (Sign-Up)..
Sekarang siapkan Alat dan Bahannya..
  1. Text editor.
  2. Browser.
  3. XAMPP atau server lain.
Setelah semua terkempul sekarang dapat kita mulai tutorial Part 2, Sesuaidengan Konsep CRUD (Creat, Read, Update, Delete) yang pertama kali kita kerjakan adalah “Membuat Proses Sign-Up/Register/Daftar”..
Sekarang Kita mulai..

Langkah 1
Kita akan membuat Database sebagai wadah data user,
Saya asumsikan anda sudah bias menggunakan PHPmyAdmin..
Buka XAMPP lalu Run Apache dan MySQL..

Langkah 2
Buka PhpMyAdmin..
Sekarang buat database dengan nama sesuka anda, saya menggunakan database name “sms_db”..
Lalu buat table “user”
Dengan struktur sebagai berikut
 1
Lalu buat table “biodata”
Dengan struktur sebagai berikut
 2

Jika anda kesulitan, silahkan jalankan code SQL ini..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
CREATE TABLE IF NOT EXISTS `user` (
  `id_user` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(15) NOT NULL,
  `password` text NOT NULL,
  PRIMARY KEY (`id_user`),
  UNIQUE KEY `username` (`username`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
CREATE TABLE IF NOT EXISTS `biodata` (
  `id_user` int(11) NOT NULL,
  `nama` varchar(50) NOT NULL,
  `email` text NOT NULL,
  `kelamin` enum('','L','P') NOT NULL,
  `lahir` date NOT NULL,
  `lokasi` varchar(50) NOT NULL,
  `bio` text NOT NULL,
  `foto` text NOT NULL,
  `reg_date` date NOT NULL,
  PRIMARY KEY (`id_user`),
  UNIQUE KEY `id_user` (`id_user`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Jalankan di sini lalu “GO”..
 3

Langkah 3
Buat folder  “system” yang akan menampung file-file fungsi php kita agar lebih rapi..
Sekarang kita akan membuat “connect.php” di dalam folder  “system” untuk mengkonekkan script php kita ke database..
Struktur foldernya seperti ini..
sms/
->system/
--connect.php
->view/

Kemudian buka connect.php dengan text editor..
Pastekan code ini, penjelasan fungsi dan perintah code sudah ada dalam komentar code..
1
2
3
4
5
6
7
8
9
10
11
12
<?php
//DATA
$host=''; //isi dengan hostname database anda, untuk XAMPP biasanya 'localhost'.
$username=''; //isi dengan username database anda, untuk XAMPP biasanya 'root'.
$password=''; //isi dengan password database anda,untuk XAMPP secara standart kosong ''.
$database=''; //isi dengan database yang digunakan, disini saya menggunakan 'sms_db'.
//PROSES
$connect_db=mysql_connect($host,$username,$password);
$select_db=mysql_select_db($database);
//ERROR
if(!$connect_db){echo'Terjadi ERROR pada Connect Database. Mungkin data yang anda masukan salah.'; exit;}
if(!$select_db){echo'Database tidak dapat dipilih.. Masukan nama database dengan tepat.'; exit;}?>
Setting koneksi dengan benar dengan mengisi value  yang masih kosong.
Lalu save..

Langkah 4
Kita akan mulai membuat proses register..
Buka index.php yang di part 1 sudah di buat, buka dengan text editor..
Include kan connect.php di atas include index_header..
1
2
3
4
5
6
<?php
//Connect DB
include_once'system/connect.php';
//Memasukan File header
include_once'index_header.php';
?>

Kemudian masukan perintah mysql_close() dibawah  include index_footer..
1
2
3
4
5
6
<?php
//memasukan file footer
include_once'index_footer.php';
//menutup koneksi MySQL
mysql_close();
?>
Kenapa harus ada mysql_close()? Karena code ini di gunkan untuk menutup koneksi yang telah di gunkan dihalaman ini karena akan memberatkan server jika terus di buka, kata guru saya..
Lalu save..
Cek ke benaran settingan connect db anda dengan membuka halaman index..
Buka browser, masukan “localhost/sms” di address bar..
Jika tidak ada pesan “Terjadi ERROR pada Connect Database. Mungkin data yang anda masukan salah.” Atau “Database tidak dapat dipilih.. Masukan nama database dengan tepat.”
Berarti settingan anda sudah benar..

Langkah 5
Kita akan membuat proses Sign-Up..
Namun sebelumnya kita buat dulu file “home.php” karena jika proses register sukses maka anda akan di lempar ke “home.php”..
Untuk sementara, isi home.php dengan tulisan “Ini halaman home”..
Sekarang sudah bisa mulai kita mulai membuat Proses Sign-UP..
Buka index.php dengan text editor, Letakan code ini di bawah code include connect.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
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
//Proses Sign-UP/Register
if($_POST['sign-up']) //sesuai dengan nama button pada form sign-up
{
    //Mengambil value dari form..
    $up_username=htmlentities(mysql_real_escape_string($_POST['up-username']));
    $up_name=htmlentities(mysql_real_escape_string($_POST['up-name']));
    $up_email=htmlentities(mysql_real_escape_string($_POST['up-email']));
    $up_password1=htmlentities(mysql_real_escape_string($_POST['up-password1']));
    $up_password2=htmlentities(mysql_real_escape_string($_POST['up-password2']));
    //Cek data kosong.
    if(!$up_username){$error_msg='Username Kosong.';}
    elseif(!$up_name){$error_msg='Nama lengkap Kosong.';}
    elseif(!$up_email){$error_msg='Email Kosong.';}
    elseif(!$up_password1){$error_msg='Password Kosong.';}
    elseif(!$up_password2){$error_msg='Password Kosong.';}
    else{
        //Cek Keunikan Username
        $username_qry=mysql_query("SELECT username FROM user WHERE username='$up_username' LIMIT 0,1");
        $cek_username=mysql_num_rows($username_qry);
        if($cek_username!='0'){
            $error_msg='Username Sudah digunakan. Coba yang lain';
        }
        else{
            //Cek format email
            if (!filter_var($up_email, FILTER_VALIDATE_EMAIL))
            {
                $error_msg='Email tidak Valid.';
            }
            else
            {
                //Cek keunikan email
                $email_qry=mysql_query("SELECT email FROM biodata WHERE email='$up_email' LIMIT 0,1");
                $cek_email=mysql_num_rows($email_qry);
                if($cek_email!='0'){
                    $error_msg='Email Sudah digunakan.';
                }
                else{
                    //encripsi password md5 lalu sha1 lalu md5 biar aman..<img src="/img/emoticon/smile.gif">
                    $enc_pass1=md5(sha1(md5($up_password1)));
                    $enc_pass2=md5(sha1(md5($up_password2)));
                    //Mencocokan Password
                    if($enc_pass1!=$enc_pass2){
                        $error_msg='Password Tidak Cocok.';
                    }
                    else{
                        //Proses Input data di 2 table
                        $go1=mysql_query("INSERT INTO user VALUE ('', '$up_username', '$enc_pass1')");
                        $id_user=mysql_insert_id();//Ambil id user secara langsung
                       $go2=mysql_query("INSERT INTO biodata (id_user,nama,email,reg_date) VALUE ('$id_user','$up_name','$up_email',NOW())");
                        //membuat session
                        $_SESSION['chat_i_id']=$id_user;
                        //melempar ke halaman lain
 
                        header('Location: home.php');
                        exit;
 
                    }
                }
            }
        }
    }
}
Kenapa tidak menyimpan data Username dan Password di session?
Tidak menyimpan username, karena username dapat di ubah-ubah. Saya lebih baik meload database untuk mengambil username dan informasi lain dari id yang kita simpan di session..
Tidak meyimpan password, karena disebuah forum banyak teman saya yang memberikan saran agar tidak menyimpan data rahasia di session atau cookies. Karena mungkin saja user dapat menampilkanya dan di decripsi yang tentunya sangat berbahaya..

Langkah 6
Pada kode diatas error yang terjadi sudah di deskripsikan dengan $up_error_msg, tetapi belum ditampikan.
Untuk menampilkan pesan error di atas form, silahkan patekan code ini di atas Komentar <!-- Form Sign-up/Daftar -->..
1
2
<!-- ERROR Sign-up/Daftar -->
                    <?php if($up_error_msg){echo'<div class="alert alert-danger">';echo $up_error_msg;echo'</div>';}?>

jika terjadi error maka form akan kembali kosong, untuk mengatasinya kita tambakan data yang telah diambil ke value..
Ganti input username sampai email dengan code ini..
1
2
3
4
5
6
7
8
9
10
11
12
<div class="form-group">
                            <label for="up-username">Username</label>
                            <input value="<?php echo $up_username;?>" id="up-username" type="text" name="up-username" class="form-control" maxlength="15">
                </div>
                        <div class="form-group">
                            <label for="up-name">Nama Lengkap</label>
                            <input value="<?php echo $up_name;?>" id="up-name" type="text" name="up-name" class="form-control" maxlength="50">
                        </div>
                        <div class="form-group">
                            <label for="up-email">Email</label>
                            <input value="<?php echo $up_email;?>" id="up-email" type="email" name="up-email" class="form-control" maxlength="70">
                        </div>
Lalu save

Ini Full Code index.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
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<?php
//Connect DB
include_once'system/connect.php';
//Proses Sign-UP/Register
if($_POST['sign-up']) //sesuai dengan nama button pada form sign-up
{
    //Mengambil value dari form..
    $up_username=htmlentities(mysql_real_escape_string($_POST['up-username']));
    $up_name=htmlentities(mysql_real_escape_string($_POST['up-name']));
    $up_email=htmlentities(mysql_real_escape_string($_POST['up-email']));
    $up_password1=htmlentities(mysql_real_escape_string($_POST['up-password1']));
    $up_password2=htmlentities(mysql_real_escape_string($_POST['up-password2']));
    //Cek data kosong.
    if(!$up_username){$up_error_msg='Username Kosong.';}
    elseif(!$up_name){$up_error_msg='Nama lengkap Kosong.';}
    elseif(!$up_email){$up_error_msg='Email Kosong.';}
    elseif(!$up_password1){$up_error_msg='Password Kosong.';}
    elseif(!$up_password2){$up_error_msg='Password Kosong.';}
    else{
        //Cek Keunikan Username
        $username_qry=mysql_query("SELECT username FROM user WHERE username='$up_username' LIMIT 0,1");
        $cek_username=mysql_num_rows($username_qry);
        if($cek_username!='0'){
            $up_error_msg='Username Sudah digunakan. Coba yang lain';
        }
        else{
            //Cek format email
            if (!filter_var($up_email, FILTER_VALIDATE_EMAIL))
            {
                $up_error_msg='Email tidak Valid.';
            }
            else
            {
                //Cek keunikan email
                $email_qry=mysql_query("SELECT email FROM biodata WHERE email='$up_email' LIMIT 0,1");
                $cek_email=mysql_num_rows($email_qry);
                if($cek_email!='0'){
                    $up_error_msg='Email Sudah digunakan.';
                }
                else{
                    //encripsi password md5 lalu sha1 lalu md5 biar aman..<img src="/img/emoticon/smile.gif">
                    $enc_pass1=md5(sha1(md5($up_password1)));
                    $enc_pass2=md5(sha1(md5($up_password2)));
                    //Mencocokan Password
                    if($enc_pass1!=$enc_pass2){
                        $up_error_msg='Password Tidak Cocok.';
                    }
                    else{
                        //Proses Input data di 2 table
                        $go1=mysql_query("INSERT INTO user VALUE ('', '$up_username', '$enc_pass1')");
                        $id_user=mysql_insert_id();//Ambil id user secara langsung
                       $go2=mysql_query("INSERT INTO biodata (id_user,nama,email,reg_date) VALUE ('$id_user','$up_name','$up_email',NOW())");
                        //membuat session
                        $_SESSION['chat_i_id']=$id_user;
                        //melempar ke halaman lain
 
                        header('Location: home.php');
                        exit;
 
                    }
                }
            }
        }
    }
}
//Memasukan File header
include_once'index_header.php';
?>
<div class="container-fluid" style="margin-top: 5%">
    <div class="row">
        <div class="col-md-5 col-md-offset-2">
            <!-- Deskripsi -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title"><i class="fa fa-3x fa-comments-o text-success"></i> Simple Messanging System [SMS]</h1>
                </div>
                <div class="panel-body">
                    <img src="view/images/icon.png" class="img-responsive center-block">
                    Membuat Simple Messanging system..
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <!-- Layout Sign-in/Login/Masuk -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-2x fa-lock text-success"></i> Sign-In</h3>
                </div>
                <div class="panel-body">
                    <!-- Form Sign-in/Login/Masuk -->
                    <form action="" method="post">
                        <div class="form-group">
                        <label for="in-username">Username</label>
                        <input id="in-username" type="text" name="in-username" class="form-control" maxlength="15">
                            </div>
                        <div class="form-group">
                        <label for="in-password">Password</label>
                        <input id="in-password" type="password" name="in-password" class="form-control">
                            </div>
 
                        <button type="submit" name="sign-in" value="go" class="btn btn-success pull-right"><i class="fa fa-unlock"></i> OK</button>
 
 
                    </form>
                </div>
            </div>
            <!-- Layout Sign-up/Daftar -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-2x fa-paper-plane-o text-success"></i> Sign-Up</h3>
                </div>
 
                <div class="panel-body">
                    <!-- ERROR Sign-up/Daftar -->
                    <?php if($up_error_msg){echo'<div class="alert alert-danger">';echo $up_error_msg;echo'</div>';}?>
                    <!-- Form Sign-up/Daftar -->
                    <form action="" method="post">
                        <div class="form-group">
                            <label for="up-username">Username</label>
                            <input value="<?php echo $up_username;?>" id="up-username" type="text" name="up-username" class="form-control" maxlength="15">
                </div>
                        <div class="form-group">
                            <label for="up-name">Nama Lengkap</label>
                            <input value="<?php echo $up_name;?>" id="up-name" type="text" name="up-name" class="form-control" maxlength="50">
                        </div>
                        <div class="form-group">
                            <label for="up-email">Email</label>
                            <input value="<?php echo $up_email;?>" id="up-email" type="email" name="up-email" class="form-control" maxlength="70">
                        </div>
                        <div class="form-group">
                            <label for="up-password1">Password</label>
                            <input id="up-password1" type="password" name="up-password1" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="up-password2">Ulangi Password</label>
                            <input id="up-password2" type="password" name="up-password2" class="form-control">
                        </div>
 
 
                        <button type="submit" name="sign-up" value="go" class="btn btn-success pull-right"><i class="fa fa-send"></i> Send Data</button>
 
 
                    </form>
                </div>
            </div>
        </div>
 
    </div>
</div>
<?php
//memasukan file footer
include_once'index_footer.php';
//menutup koneksi MySQL
mysql_close();
?>

Langkah 7
Kita coba melakukan register..
 4
Jika berhasil maka akan dilempar ke halaman home.php dengan tulisan “Ini Halaman Home”  seperti  yang dibuat di langkah 4..
Untuk mengecek keberhasilan input data kita silahkan cek data di database..
Table “user”
 5

Table “biodata”
 6

SELESAI Membuat Proses Sign-up/Register/Daftar..

 
Asalamualaikum,
Setelah di part sebelumnya kita sudah membuat design dan proses register, sekarang kita akan membuat “Proses Sign-IN dan Sign-OUT”.
Disini kita akan membuat form Sign-IN di index.php dapat berfungsi dengan cara mengecek data user untuk dapat masuk ke Online Messanger kita.
Sekarang siapkan alat dan bahannya..
  1. Text editor.
  2. Browser.
  3. XAMPP atau server lain.
Setelah semua terkumpul, sekarang kita mulai..

Langkah 1
Karena di Part 2 kita sudah membuat database dan file connect yang elah di include ke index.php dengan sukses, sekarang kita tinggal membuat proses untuk Sign-IN..
Caranya..
Buka index.php dengan text editor lalu cari komentar “//Memasukan File header”..
Letakan code ini di atas komentar “//Memasukan File header”, fungsi dari code sudah ada dalam komentar code ini..
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
//Proses Sign-IN/Login/Masuk
elseif($_POST['sign-in']){ //sesuai nama button submit pada form sign-in
    //Mengambil value dari form..
    $in_username=htmlentities(mysql_real_escape_string($_POST['in-username']));
    $in_password=htmlentities(mysql_real_escape_string($_POST['in-password']));
    //Cek data kosong.
    if(!$in_username){$in_error_msg='Username Kosong.';}
    elseif(!$in_password){$in_error_msg='Password Kosong.';}
    else{
        $enc_pass=md5(sha1(md5($in_password)));//Proses Encripsi password. samakan struktur encripsi dengan encripsi pada saat register. saya menggunkan md5->sha1->md5.
        //Proses Sign-IN
        $sign_qry=mysql_query("SELECT id_user FROM user WHERE username='$in_username' AND password='$enc_pass'");//mencocokan data Username dan Password
        $num_rows=mysql_num_rows($sign_qry);//Cek jumlah data yang di temukan.
        if($num_rows!=1){ //Memastikan jumlah data yang ditemukan hanya 1 user, jika 1 orang maka akan dinyatakan bahya data sudah valid.
            $in_error_msg='Terjadi tidak kecocokan antara Username dan Password';
        }else{
            //COCOK
            //ambil id user
            $data_user=mysql_fetch_assoc($sign_qry);
            $id_user=$data_user['id_user'];
            //membuat session
            $_SESSION['chat_i_id']=$id_user;
            //melempar ke halaman lain
            header('Location: home.php');
        }
    }
}
Kenapa tidak menyimpan data Username dan Password di session?
Tidak menyimpan username, karena username dapat di ubah-ubah. Saya lebih baik meload database untuk mengambil username dan informasi lain dari id yang kita simpan di session..
Tidak meyimpan password, karena disebuah forum banyak teman saya yang memberikan saran agar tidak menyimpan data rahasia di session atau cookies. Karena mungkin saja user dapat menampilkanya dan di decripsi yang tentunya sangat berbahaya..

Langkah 2
Pada kode diatas error yang terjadi sudah di deskripsikan dengan $in_error_msg, tetapi belum ditampikan.
Untuk menampilkan pesan error di atas form, silahkan patekan code ini di atas Komentar  <!-- Form Sign-in/Login/Masuk -->..
1
2
<!-- ERROR Sign-IN/Login/Daftar -->
                    <?php if($in_error_msg){echo'<div class="alert alert-danger">';echo $in_error_msg;echo'</div>';}?>
jika terjadi error maka form akan kembali kosong, untuk mengatasinya kita tambakan data yang telah diambil ke value..
Ganti input username dengan code ini..
1
<input value="<?php echo $in_username;?>" id="in-username" type="text" name="in-username" class="form-control" maxlength="15">
Lalu save..

Ini Full Code index.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
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<?php
//Connect DB
include_once'system/connect.php';
//Proses Sign-UP/Register
if($_POST['sign-up']) //sesuai dengan nama button pada form sign-up
{
    //Mengambil value dari form..
    $up_username=htmlentities(mysql_real_escape_string($_POST['up-username']));
    $up_name=htmlentities(mysql_real_escape_string($_POST['up-name']));
    $up_email=htmlentities(mysql_real_escape_string($_POST['up-email']));
    $up_password1=htmlentities(mysql_real_escape_string($_POST['up-password1']));
    $up_password2=htmlentities(mysql_real_escape_string($_POST['up-password2']));
    //Cek data kosong.
    if(!$up_username){$up_error_msg='Username Kosong.';}
    elseif(!$up_name){$up_error_msg='Nama lengkap Kosong.';}
    elseif(!$up_email){$up_error_msg='Email Kosong.';}
    elseif(!$up_password1){$up_error_msg='Password Kosong.';}
    elseif(!$up_password2){$up_error_msg='Password Kosong.';}
    else{
        //Cek Keunikan Username
        $username_qry=mysql_query("SELECT username FROM user WHERE username='$up_username' LIMIT 0,1");
        $cek_username=mysql_num_rows($username_qry);
        if($cek_username!='0'){
            $up_error_msg='Username Sudah digunakan. Coba yang lain';
        }
        else{
            //Cek format email
            if (!filter_var($up_email, FILTER_VALIDATE_EMAIL))
            {
                $up_error_msg='Email tidak Valid.';
            }
            else
            {
                //Cek keunikan email
                $email_qry=mysql_query("SELECT email FROM biodata WHERE email='$up_email' LIMIT 0,1");
                $cek_email=mysql_num_rows($email_qry);
                if($cek_email!='0'){
                    $up_error_msg='Email Sudah digunakan.';
                }
                else{
                    //encripsi password md5 lalu sha1 lalu md5 biar aman..<img src="/img/emoticon/smile.gif">
                    $enc_pass1=md5(sha1(md5($up_password1)));
                    $enc_pass2=md5(sha1(md5($up_password2)));
                    //Mencocokan Password
                    if($enc_pass1!=$enc_pass2){
                        $up_error_msg='Password Tidak Cocok.';
                    }
                    else{
                        //Proses Input data di 2 table
                        $go1=mysql_query("INSERT INTO user VALUE ('', '$up_username', '$enc_pass1')");
                        $id_user=mysql_insert_id();//Ambil id user secara langsung
                       $go2=mysql_query("INSERT INTO biodata (id_user,nama,email,reg_date) VALUE ('$id_user','$up_name','$up_email',NOW())");
                        //membuat session
                        $_SESSION['chat_i_id']=$id_user;
                        //melempar ke halaman lain
                        header('Location: home.php');
                        exit;
 
                    }
                }
            }
        }
    }
}
//Proses Sign-IN/Login/Masuk
elseif($_POST['sign-in']){ //sesuai nama button submit pada form sign-in
    //Mengambil value dari form..
    $in_username=htmlentities(mysql_real_escape_string($_POST['in-username']));
    $in_password=htmlentities(mysql_real_escape_string($_POST['in-password']));
    //Cek data kosong.
    if(!$in_username){$in_error_msg='Username Kosong.';}
    elseif(!$in_password){$in_error_msg='Password Kosong.';}
    else{
        $enc_pass=md5(sha1(md5($in_password)));//Proses Encripsi password. samakan struktur encripsi dengan encripsi pada saat register. saya menggunkan md5->sha1->md5.
        //Proses Sign-IN
        $sign_qry=mysql_query("SELECT id_user FROM user WHERE username='$in_username' AND password='$enc_pass'");//mencocokan data Username dan Password
        $num_rows=mysql_num_rows($sign_qry);//Cek jumlah data yang di temukan.
        if($num_rows!=1){ //Memastikan jumlah data yang ditemukan hanya 1 user, jika 1 orang maka akan dinyatakan bahya data sudah valid.
            $in_error_msg='Terjadi tidak kecocokan antara Username dan Password';
        }else{
            //COCOK
            //ambil id user
            $data_user=mysql_fetch_assoc($sign_qry);
            $id_user=$data_user['id_user'];
            //membuat session
            $_SESSION['chat_i_id']=$id_user;
            //melempar ke halaman lain
            header('Location: home.php');
        }
    }
}
//Memasukan File header
include_once'index_header.php';
?>
<div class="container-fluid" style="margin-top: 5%">
    <div class="row">
        <div class="col-md-5 col-md-offset-2">
            <!-- Deskripsi -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title"><i class="fa fa-3x fa-comments-o text-success"></i> Simple Messanging System [SMS]</h1>
                </div>
                <div class="panel-body">
                    <img src="view/images/icon.png" class="img-responsive center-block">
                    Membuat Simple Messanging system..
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <!-- Layout Sign-in/Login/Masuk -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-2x fa-lock text-success"></i> Sign-In</h3>
                </div>
                <div class="panel-body">
                    <!-- ERROR Sign-IN/Login/Daftar -->
                    <?php if($in_error_msg){echo'<div class="alert alert-danger">';echo $in_error_msg;echo'</div>';}?>
                    <!-- Form Sign-in/Login/Masuk -->
                    <form action="" method="post">
                        <div class="form-group">
                        <label for="in-username">Username</label>
                        <input value="<?php echo $in_username;?>" id="in-username" type="text" name="in-username" class="form-control" maxlength="15">
                            </div>
                        <div class="form-group">
                        <label for="in-password">Password</label>
                        <input id="in-password" type="password" name="in-password" class="form-control">
                            </div>
 
                        <button type="submit" name="sign-in" value="go" class="btn btn-success pull-right"><i class="fa fa-unlock"></i> OK</button>
 
 
                    </form>
                </div>
            </div>
            <!-- Layout Sign-up/Daftar -->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-2x fa-paper-plane-o text-success"></i> Sign-Up</h3>
                </div>
 
                <div class="panel-body">
                    <!-- ERROR Sign-up/Daftar -->
                    <?php if($up_error_msg){echo'<div class="alert alert-danger">';echo $up_error_msg;echo'</div>';}?>
                    <!-- Form Sign-up/Daftar -->
                    <form action="" method="post">
                        <div class="form-group">
                            <label for="up-username">Username</label>
                            <input value="<?php echo $up_username;?>" id="up-username" type="text" name="up-username" class="form-control" maxlength="15">
                </div>
                        <div class="form-group">
                            <label for="up-name">Nama Lengkap</label>
                            <input value="<?php echo $up_name;?>" id="up-name" type="text" name="up-name" class="form-control" maxlength="50">
                        </div>
                        <div class="form-group">
                            <label for="up-email">Email</label>
                            <input value="<?php echo $up_email;?>" id="up-email" type="email" name="up-email" class="form-control" maxlength="70">
                        </div>
                        <div class="form-group">
                            <label for="up-password1">Password</label>
                            <input id="up-password1" type="password" name="up-password1" class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="up-password2">Ulangi Password</label>
                            <input id="up-password2" type="password" name="up-password2" class="form-control">
                        </div>
 
 
                        <button type="submit" name="sign-up" value="go" class="btn btn-success pull-right"><i class="fa fa-send"></i> Send Data</button>
 
 
                    </form>
                </div>
            </div>
        </div>
 
    </div>
</div>
<?php
//memasukan file footer
include_once'index_footer.php';
//menutup koneksi MySQL
mysql_close();
?>

Langkah 3
Sekarang coba lakukan login dengan data yang anda register/daftarkan.
 1
Jika berhasil anda akan di lempar ke halaman home.php

Langkah 4
Setelah selesai membuat proses sign in sekarang kita akan membuat proses sign out..
Buat file “out.php” di folder “system” yang telah kita buat di Part 2..
Buka file  out.php dengan text editor..
Lalu pastekan code berikut, fungsi dari kode sudah ada di komentar code..
1
2
3
4
<?php session_start();
session_unset($_SESSION['chat_i_id']); //menghapus session
header('Location: ../index.php');
?>
Lalu save..

Langkah 5
Sekarang kita tambahkan link sementara untuk Sign-Out di home.php..
Buka home.php dengan text editor..
Lalu tambahkan  link yang menuju ke “system/out.php”..
Contoh..
1
<a href=” system/out.php”>Sign-OUT</a>
Lalu save..
 2
Selesai Membuat Proses Sign-IN dan Sign-OUT..
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)