Sistem Informasi Penjualan menggunakan PHP Native dan Admin LTE ( Part 1 )

  1. Aktifkan xampp anda terlebih dahulu. Tekan tombol window               pada keyboard anda, lalu ketik xampp .

 

 

2. Klik Start pada Apache serta MySQL

3. Kemudian buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/dashboard/ pada link URL anda.

4. Kemudian buatlah sebuah folder dengan nama sip-native dalam directory htdocs anda , secara default ada di   C:\xampp2\htdocs  6. Sekarang kita download Admin LTE template di https://github.com/almasaeed2010/AdminLTE/releases . Scroll ke bawah, seperti gambar dibawah, lalu pilih Source code (zip) .

7. Setelah file berhasil di download, extract file tersebut.

8. Kemudian copy folder AdminLTE-3.0.0-alpha ke dalam folder C:\xampp2\htdocs\sip-native .  

 

9. Lalu rename folder AdminLTE-3.0.0-alpha menjadi lte.

10. Sekarang buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/sip-native/lte pada link URL anda.

11. tambahkan 3 folder baru  di dalam direktori C:\xampp2\htdocs\sip-native .

12. Sekarang buat sebuah file admin_view.php di dalam C:\xampp2\htdocs\sip-native\view , kemudian buatlah class dengan fungsi seperti gambar dibawah .

13. kemudian copy isi dari starter.html yang ada dalam folder lte ke dalam file admin_view.php didalam echo “<disini> “. buka link berikut https://pastebin.com/WuEUrRC2

14. Kemudian isikan code di bawah pada file index.php .

<!DOCTYPE html>
<!–
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
–>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta http-equiv=”x-ua-compatible” content=”ie=edge”>

<title>AdminLTE 3 | Starter</title>

<!– Font Awesome Icons –>
<link rel=”stylesheet” href=”lte/plugins/font-awesome/css/font-awesome.min.css”>
<!– Theme style –>
<link rel=”stylesheet” href=”lte/dist/css/adminlte.min.css”>
<!– Google Font: Source Sans Pro –>
<link href=”https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700″ rel=”stylesheet”>
</head>
<body class=”hold-transition sidebar-mini”>
<div class=”wrapper”>

<?php
include(“view/admin_view.php”);

$index=new admin_view();

$index->main_view();

?>

</div>
<!– ./wrapper –>

<!– REQUIRED SCRIPTS –>

<!– jQuery –>
<script src=”lte/plugins/jquery/jquery.min.js”></script>
<!– Bootstrap 4 –>
<script src=”lte/plugins/bootstrap/js/bootstrap.bundle.min.js”></script>
<!– AdminLTE App –>
<script src=”lte/dist/js/adminlte.min.js”></script>
</body>
</html>

15. Sekarang buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/sip-native/ pada link URL anda.

16. kemudian kita pisahkan header, footer, sidebar dengan cara membuat 3 file seperti gambar di bawah

17. sekarang pisahkan bagian header yang ada di fungsi main_view ( ) ke dalam file header.php . Cari tag <!– Navbar –>

18. Untuk memanggil file nya, gunakan include , lakukan cara yang sama untuk sidebar dan footer

19. Sekarang jadikan main content seperti gambar berikut

20. Kemudian buat menu seperti gambar berikut

21. Sekarang buatlah sebuah file dengan nama dashboard.php dalam folder view .kemudian isi kode di bawah ini

22. Sekarang kita coba panggil dashboard.php pada main_view, tambahkan parameter $page

23. Sekarang buatlah sebuah file dalam folder controller dengan nama DashboardController.php . Kemudian isi code seperti gambar di bawah

24. Lalu ubah code pada index.php seperti gambar di bawah.

25. Sekarang buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/sip-native/ pada link URL anda.

26. Arahkan url link pada dashborad menu anda , ke halaman index.

27. Okey, sekarang kita akan membuat database dengan nama sip_native

28 buatlah sebuah tabel dengan nama categories

29. sekarang kita buat file baru Category.php dalam folder Model

30. buatlah sebuah folder dengan nama category dalam view . Lalu, buat file dengan nama create.php.

31. Masukkan code berikut ke dalam create.php

 <div class="row">
        <div class="col-12">
            <form method="POST" action="">
                {{ csrf_field() }}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Add Category</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="name">Category</label>
                            <input type="text" name="name" class="form-control" placeholder="Enter category" />
                        </div>
                        <div class="form-group">
                            <label for="status">Status</label>
                            <select name="status" class="form-control">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </div>
                    <div class="card-footer">
                        <a href="/sip-native/category/create" class="btn btn-outline-info">Back</a>
                        <button type="submit" class="btn btn-primary pull-right">Add Category</button>
                    </div>
                </div>
            </form>
        </div>
</div>

32. Sekarang buat file CategoryController.php dalam folder controller

33. lalu tambahkan code ini dalam fungsi main_view

34. Selanjutnya ubah index.php

35. Sekarang buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/sip-native/?category/create pada link URL anda.

36. Pada Category.php , buat method store untuk menyimpan ke database

37. Pada CategoryController.php , buat method store untuk menyimpan ke database

<?php  
include("./view/admin_view.php");
include("./model/Category.php");

/**
 * 
 */
class CategoryController
{
	
	public function create()
	{
		# code...
		$page="category-create";
		$adminView=new admin_view();
		$adminView->main_view($page);
	}


	public function store($name,$status)
	{
		# code...
		$category=new Category();	
		$category->store($name,$status);		
		
	}

}

38. Tambahkan action pada create.php di folder category

39. ubah code pada index.php

40. sekarang coba input data menggunakan form create category, lalu cek di database anda.

41. Sekarang buatlah file index.php di dalam folder category , masukkan code berikut

<div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Categories</h3>
                </div>
                <div class="card-body">
                    <?php if (!empty($_SESSION['message'])) {
                        # code...
                     ?>
                    <div id="alert-msg" class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        
                        <?php echo"".$_SESSION['message']; ?>
                    </div>
                    <?php  }?>

                    <table class="table table-bordered table-hover">
                        <thead>
                            <tr class="text-center">
                                <th>ID</th>
                                <th>Name</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <?php $data=$_SESSION['data']; ?>
                        <tbody>
                            <?php while ($category=$data->fetch(PDO::FETCH_OBJ)) { ?>
                            <tr>
                                <td class="text-center"><?php echo "".$category->id; ?></td>
                                <td><?php echo "".$category->name ?></td>
                                <td class="text-center"><?php echo "".ucfirst($category->status) ?></td>
                                <td class="text-center">
                                    <form method="POST" action="">
                                        <input type="hidden" name="_method" value="DELETE" />
                                        <div class="btn-group">
                                            <a class="btn btn-info" href=""><i class="fa fa-eye"></i></a>
                                            <a class="btn btn-success" href=""><i class="fa fa-pencil"></i></a>
                                            <button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i></button>
                                        </div>
                                    </form>
                                </td>
                            </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

42. Tambahkan method baru all di dalam Category.php

43. Tambahkan method baru index di dalam CategoryController.php

44. Pada fungsi main_view , tambahkan code dibawah

45. pada index.php

46. Sekarang buka salah satu Web Browser Anda Google Chrome, Mozilla, dll. Lalu ketik http://localhost/sip-native/?category pada link URL anda.

Leave a Reply

Your email address will not be published. Required fields are marked *