Quantcast
Channel: Kursus Website Terbaik
Viewing all articles
Browse latest Browse all 2170

CRUD Image OOP PHP Part 1

$
0
0

Halo teman teman Dumenity Dumet school, kembali lagi di tutorial tutorial tentang pemrogramman web Dumet School, seperti yang kita tahu OOP itu merupakan kepanjangan dari Object Oriented Programming atau Pemrograman Berbasis Objek.

Pemrograman Berbasis Objek adalah suatu tata cara pembuatan program (programming paradigm) dengan menggunakan konsep “objek” yang memiliki data (atribut yang menjelaskan tentang objek) dan prosedur (function) yang dikenal dengan method. sederhananya seperti suatu konsep pembuatan program dengan memecah permasalahan program dengan menggunakan objek. OOP ini sangat wajib di pelajari Khusunya bagi kalian yang ingin belajar Framework Baiklah langsung aja yah kita praktekan yah teman teman cara membuat CRUD Image OOP PHP ini.

sebelum teman teman bisa buat database terlebih dahulu, nama database nya bebas yah tapi yang relevean, dan setelah itu buat table berikut di database nya.

lalu untuk struktur folder nya buat seperti ini yah teman teman.

jadi kita punya folder uploadgambarOOP yang di dalam nya berisi index.php dan beberapa folder. nah saya jelas kan sedikit folder foldernya yah teman teman, jadi di

folder Controller itu berisi class class PHP yang di butuhkan, contohnya class Database.

folder gambar itu berisi gambar gambar yang di upload pada aplikasi kita akan tersimpan di folder ini.

di dalam folder include berisi pecahan pecahan template yang di bagi mendaji beberapa bagian misalnya header.php dan footer.php

di dalam folder page itu untuk halaman dinamis pada aplikasi PHP kita,

oke bila kalian sudah membuat folder nya kalian bisa ke index.php dan ketikan struktur HTML berikut yah teman teman.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    <title>Upload Gambar</title>
    <!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
	<div class="container">
		<div class="row">
            <div class="col">
                <h2 class="text-success text-center">CRUD Image</h2>
                <div class="panel panel-default">
                  <div class="panel-body ">
                    <form action="" method="post" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="exampleInputFile">Pilih Gambar</label>
                        <input  type="file" name="file" id="exampleInputFile" >
                    </div>
                        <input class="btn btn-info btn-sm" type="submit" id="btn" value="Kirim Gambar" name="submit" >
                    </form>
                  </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <tr>
                            <th>No</th>
                            <th>Nama Gambar</th>
                            <th>Gambar</th>
                            <th>Action</th>
                        </tr>
                   
                        <tr>
                            <td></td>
                            <td></td>
                            <td><img src="images/" alt="" width="70" height="100"></td>
                            <td>
                                <a href=""  class="btn btn-danger" name="delete">Delete</a> |
                                <a href=""  class="btn btn-success" name="edit">Edit</a>
                            </td>
                        </tr>
                    
                    </table>
                </div>
            </div>
        </div>
    </div>

   </body>
</html>

sebelum penutup </body> ketikan script javascript berikut yah teman teman.

<!– Latest compiled and minified JavaScript –>
<script src=”https://code.jquery.com/jquery-3.2.1.min.js” ></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<script>
var btn = document.querySelector(‘#btn’);
var input = document.querySelector(‘#exampleInputFile’);

btn.setAttribute(‘disabled’, ‘disabled’);
input.onchange = function () {
btn.removeAttribute(‘disabled’, ‘disabled’);
}
</script>

tampilan nya seperti ini yah teman teman.

untuk tahap berikut nya kita akan lanjut di Tutorial CRUD Image PHP OOP Part 2, sekitan Tutorial CRUD PHP OOP Part 1.

The post CRUD Image OOP PHP Part 1 appeared first on Kursus Website Terbaik.


Viewing all articles
Browse latest Browse all 2170

Trending Articles