Cara Membuat Slider Dinamis Dengan PHP
Langkah langkah nya yaitu :
1.
Kilik
tombol Start pada Apache dan MySQL
Gambar 2.1
Xampp Control
Panel
3.
Mulailah
membuat database dengan mengeklik tombol New
4.
Buatlah
database dengan nama slideshowtoko
5.
Kemudian
buatlah table pertama dengan nama slideshow
cukup 3 kolom.
Kolom pertama, id || int(200) || AUTO_INCREMENT
Kolom kedua, gambar || varchar(200)
Kolom ketiga, ket || varchar(250)
Gambar 2.2
Tabel slideshow
pada phpMyAdmin
6.
Kemudian
buatlah table kedua dengan nama user cukup
3 kolom.
Kolom pertama, id || int(11) || AUTO_INCREMENT
Kolom kedua, username
|| varchar(200)
Kolom ketiga, password
|| varchar(255)
Gambar 2.3
Tabel user pada
phpMyAdmin
7.
Buatlah
folder SlideShowToko kemudian buka
folder tersebut di code editor
8.
Buatlah
file index.php dalam folder SlideShowToko
9.
Ketikan
kode berikut terlebih dahulu
1.
<!DOCTYPE html>
2.
<html lang="en">
3.
<head>
4.
<meta charset="UTF-8">
5.
<title>Halaman
Admin</title>
6.
<link rel="stylesheet" href="admin.css">
7.
</head>
8.
<body>
9.
<div class="header-index">
10. <a href="logout.php"><h1>Logout</h1></a>
11. </div>
12. <div class="isi-index">
13. <div class="kotak">
14. <h1 class="judul-kotak">Tambah
Gambar</h1>
15. <form action="" method="POST" enctype="multipart/form-data">
16. <ul>
17. <li>
18. <label for="gambar">Silahkan
Pilih Gambar :</label>
19. <input type="file" name="gambar" id="gambar">
20. </li>
21. <li>
22. <label for="ket">Keterangan
:</label>
23. <input type="text" name="ket" id="ket" required>
24. </li>
25. <li>
26. <button type="submit" name="submit"><h1>Kirim</h1></button>
27. </li>
28. </ul>
29. </form>
30. </div>
31. </div>
32. <div class="daf-gambar">
33. <h1 class="judul-dg";>Daftar
Gambar</h1>
34. <table border="2" cellpadding="10" cellspacing="0">
35. <tr>
36. <th>Urutan
Slider</th>
37. <th>Aksi</th>
38. <th>Gambar</th>
39. <th>keterangan</th>
40. </tr>
41. <?php $i = 1; ?>
42. <?php foreach( $mahasiswa as $row ) : ?>
43. <tr>
44. <td>Slider <?= $i; ?></td>
45. <td>
46. <a href="hapus.php?id=<?= $row["id"]; ?>" onclick="return confirm('yakin?');" >hapus</a>
47. </td>
48. <td><img src="img/<?= $row["gambar"]; ?>" alt=""></td>
49. <td><?= $row["ket"]; ?></td>
50. </tr>
51. <?php $i++; ?>
52. <?php endforeach; ?>
53. </table>
54. <p>Jangan
meng-upload slider lebih dari 6</p>
55. <div class="lihat">
56. <a href="slider.php" target="_blank" rel="nofollow" title="Lihat
Slideshow"><b>Lihat
Slideshow >></b></a>
57. </div>
58. </div>
59. </body>
60. </html>
10. Kemudian buatlah file functions.php untuk koneksi database dan ketik kode dibawah
1.
<?php
2.
$conn = mysqli_connect("localhost", "root", "", "slideshowtoko");
3.
function query($query){
4.
global $conn;
5.
$result = mysqli_query($conn, $query);
6.
$rows = [];
7.
while ($row = mysqli_fetch_assoc($result)) {
8.
$rows[] = $row;
9.
}
10.
return $rows;
11.
}
12.
?>
11. Lalu di file index.php, ketikan kode ini di baris paling atas
1.
<?php
2.
session_start();
3.
if ( !isset( $_SESSION["login"])) {
4.
header("location:
login.php");
5.
exit;
6.
}
7.
require'functions.php';
8.
?>
12. Dibawah kode recuire ketik kode sebagai berikut, untuk tambah gambar
1.
$mahasiswa = query("SELECT * FROM
slideshow");
2.
if (isset($_POST["submit"])) {
3.
if (tambah($_POST) > 0 ) {
4.
echo "
5.
<script>
6.
alert('Gambar
berhasil ditambahkan!');
7.
document.location.href
= 'index.php';
8.
</script>
9.
";
10. } else {
11. echo "
12. <script>
13. alert('Gambar
gagal ditambahkan!');
14. document.location.href
= 'index.php';
15. </script>
16. ";
17. }
18. }
13. Di file functions.php, tambahkan kode berikut untuk fungsi tambah, upload,
dan hapus
1.
function tambah($data) {
2.
global $conn;
3.
$gambar = upload();
4.
if (!$gambar) {
5.
return false;
6.
}
7.
$ket = htmlspecialchars($data["ket"]) ;
8.
$query = "INSERT INTO
slideshow
9.
VALUES
10. ('', '$gambar', '$ket')
11. ";
12. mysqli_query($conn, $query);
13. return mysqli_affected_rows($conn);
14. }
15. function upload(){
16. $namaFile = $_FILES['gambar']['name'];
17. $ukuranFile = $_FILES['gambar']['size'];
18. $error = $_FILES['gambar']['error'];
19. $tmpName = $_FILES['gambar']['tmp_name'];
20. if ( $error === 4 ) {
21. echo "
<script>
22. alert('Pilih
gambar terlebih dahulu!');
23. </script>";
24. return false;
25. }
26. $ekstensiGambarValid = ['jpg', 'jpeg', 'png'];
27. $ekstensiGambar = explode('.', $namaFile);
28. $ekstensiGambar = strtolower(end($ekstensiGambar));
29. if (!in_array($ekstensiGambar, $ekstensiGambarValid)) {
30. echo "
<script>
31. alert('Yang
anda pilih bukan gambar!');
32. </script>";
33. return false;
34. }
35. if ($ukuranFile > 2000000) {
36. echo "
<script>
37. alert('Gambar
terlalu besar!');
38. </script>";
39. return false;
40. }
41. $namaFileBaru = uniqid();
42. $namaFileBaru .= '.';
43. $namaFileBaru .= $ekstensiGambar;
44. move_uploaded_file($tmpName, 'img/' . $namaFileBaru);
45. return $namaFileBaru;
46. }
47. function hapus($id){
48. global $conn;
49. mysqli_query($conn, "DELETE FROM
slideshow WHERE id = $id");
50. return mysqli_affected_rows($conn);
51. }
14. Kemudian buatlah file hapus.php, dan ketikan kode seperti di bawah
1.
<?php
2.
session_start();
3.
if ( !isset( $_SESSION["login"])) {
4.
header("location:
login.php");
5.
exit;
6.
}
7.
require 'functions.php';
8.
$id = $_GET["id"];
9.
if (hapus($id) > 0 ) {
10. echo "
11. <script>
12. alert('berhasil
dihapus');
13. document.location.href
= 'index.php';
14. </script>
15. ";
16. } else {
17. echo "
18. <script>
19. alert('gagal
dihapus');
20. document.location.href
= 'index.php';
21. </script>
22. ";
23. }
24. ?>
15. Buatlah file registrasi.php dan ketik kode seperti di bawah
1.
<?php
2.
require 'functions.php';
3.
if (isset($_POST["register"])) {
4.
if ( registrasi($_POST) > 0 ) {
5.
echo "<script>
6.
alert('user
berhasil ditambahkan');
7.
</script>";
8.
} else {
9.
echo mysqli_error($conn);
10. }
11. }
12. ?>
13. <!DOCTYPE html>
14. <html lang="en">
15. <head>
16. <meta charset="UTF-8">
17. <title>Registrasi</title>
18. <link rel="stylesheet" href="admin.css">
19. </head>
20. <body>
21. <div class="reg">
22. <h1 class="judul-reg">Registrasi</h1>
23. <form action="" method="POST">
24. <ul>
25. <li>
26. <label for="username"></label>
27. <input type="text" name="username" id="username" placeholder="Username" required="">
28. </li>
29. <li>
30. <label for="password"></label>
31. <input type="password" name="password" id="password" placeholder="Password" required="">
32. </li>
33. <li>
34. <label for="password2"></label>
35. <input type="password" name="password2" id="password2" placeholder="Konfirmasi
Password" required="">
36. </li>
37. <li>
38. <button type="submit" name="register"><h1>Kirim</h1></button>
39. </li>
40. <li>
41. <a href="login.php" style="color:
#fff; margin-left: 210px; font-family: Agency FB;">Masuk</a>
42. </li>
43. </ul>
44. </form>
45. </div>
46. </body>
47. </html>
16. Di file function.php tambahkan kode berikut
1.
function registrasi($data){
2.
global $conn;
3.
$username = strtolower(stripcslashes($data["username"])) ;
4.
$password = mysqli_real_escape_string($conn, $data["password"]);
5.
$password2 = mysqli_real_escape_string($conn, $data["password2"]);
6.
$result = mysqli_query($conn, "SELECT
username FROM user WHERE username = '$username' ");
7.
if (mysqli_fetch_assoc($result)) {
8.
echo "<script>
9.
alert('user
sudah terdaftar');
10. </script>";
11. return false;
12. }
13. if ($password !== $password2) {
14. echo "<script>
15. alert('konfirmasi
password tdk sesuai');
16. </script>";
17. return false;
18. }
19. $password = password_hash($password, PASSWORD_DEFAULT);
20. mysqli_query($conn, "INSERT INTO user VALUES ('', '$username', '$password') ");
21. return mysqli_affected_rows($conn);
22. }
17. Buatlah file login.php dan ketikan kode
dibawah
1.
<?php
2.
session_start();
3.
if (isset($_SESSION["login"])) {
4.
header("location:
index.php");
5.
exit;
6.
}
7.
require 'functions.php';
8.
if (isset($_POST["login"])) {
9.
$username = $_POST["username"];
10. $password = $_POST["password"];
11. $result = mysqli_query($conn, "SELECT * FROM user WHERE
username = '$username' " );
12. if(mysqli_num_rows($result) === 1) {
13. $row = mysqli_fetch_assoc($result);
14. if (password_verify($password, $row["password"] ) ) {
15. $_SESSION ["login"] = true;
16. header("Location:
index.php");
17. exit;
18. } else {
19. echo "
20. <script>
21. alert('Username
atau Password salah');
22. document.location.href
= 'login.php';
23. </script>
24. ";
25. }
26. }
27. }
28. $error = true;
29. ?>
30. <!DOCTYPE html>
31. <html lang="en">
32. <head>
33. <meta charset="UTF-8">
34. <title>Halaman
Login</title>
35. <link rel="stylesheet" href="admin.css">
36. </head>
37. <body>
38. <div class="login">
39. <h1 class="judul-login">Login</h1>
40. <form action="" method="POST">
41. <ul>
42. <li>
43. <label for="username"></label>
44. <input type="text" name="username" id="username" placeholder="Username">
45. </li>
46. <li>
47. <label for="password"></label>
48. <input type="password" name="password" id="password" placeholder="Password">
49. </li>
50. <li>
51. <button type="submit" name="login"><h1>Kirim</h1></button>
52. </li>
53. <li>
54. <a href="registrasi.php" style="color:
#fff; margin-left: 210px; font-family: Agency FB;">Daftar</a>
55. </li>
56. </ul>
57. </form>
58. </div>
59. </body>
60. </html>
18. Terakhir kita buat file logout.php
1.
<?php
2.
session_start();
3.
$_SESSION = [];
4.
session_unset();
5.
session_destroy();
6.
header("Location:
login.php");
7.
exit;
8.
?>
19. Untuk mempercantik tampilan, buatlah file admin.css dan ketik kode ini
1.
*{
2.
top: 0;
3.
left: 0;
4.
right: 0;
5.
bottom: 0;
6.
padding: 0;
7.
margin: 0;
8.
box-sizing: border-box;
9.
}
10. body {
11. background: #C1BDBA;
12. }
13. .reg{
14. width: 500px;
15. height: 510px;
16. background: #fff;
17. margin: 85px auto;
18. padding-top: 40px;
19. padding-left: 25px;
20. padding-right: 25px;
21. background: #24323D;
22. }
23. .judul-reg{
24. width: 100%;
25. height: 60px;
26. background: #1AB188;
27. }
28. .reg h1{
29. color: #fff;
30. font-family: Agency
FB;
31. text-align: center;
32. line-height: 50px;
33. }
34. .reg
form{
35. margin-top: 45px;
36. }
37. .reg
form ul li{
38. list-style: none;
39. }
40. .reg
form ul li input[type=text]{
41. width: 100%;
42. height: 50px;
43. margin-bottom: 25px;
44. font-size: 20px;
45. padding: 10px;
46. border: none;
47. font-family: Agency
FB;
48. }
49. .reg
form ul li input[type=password]{
50. width: 100%;
51. height: 50px;
52. margin-bottom: 25px;
53. font-size: 20px;
54. padding: 10px;
55. border: none;
56. font-family: Agency
FB;
57. }
58. .reg
form ul li button[type=submit]{
59. margin-top: 20px;
60. width: 100%;
61. height: 70px;
62. margin-bottom: 10px;
63. font-size: 15px;
64. background: #1AB188;
65. border: none;
66. font-family: Agency
FB;
67. }
68. .login{
69. width: 500px;
70. height: 450px;
71. background: #fff;
72. margin: 45px auto;
73. padding-top: 40px;
74. padding-left: 25px;
75. padding-right: 25px;
76. background: #24323D;
77. }
78. .judul-login{
79. width: 100%;
80. height: 60px;
81. background: #1AB188;
82. }
83. .login
h1{
84. color: #fff;
85. font-family: Agency
FB;
86. text-align: center;
87. line-height: 50px;
88. }
89. .login
form{
90. margin-top: 45px;
91. }
92. .login
form ul li{
93. list-style: none;
94. }
95. .login
form ul li input[type=text]{
96. width: 100%;
97. height: 50px;
98. margin-bottom: 25px;
99. font-size: 20px;
100. padding: 10px;
101. border: none;
102. font-family: Agency
FB;
103. }
104. .login
form ul li input[type=password]{
105. width: 100%;
106. height: 50px;
107. margin-bottom: 25px;
108. font-size: 20px;
109. padding: 10px;
110. border: none;
111. font-family: Agency
FB;
112. }
113. .login
form ul li button[type=submit]{
114. margin-top: 20px;
115. width: 100%;
116. height: 70px;
117. margin-bottom: 10px;
118. font-size: 15px;
119. background: #1AB188;
120. border: none;
121. font-family: Agency
FB;
122. }
20. Buatlah file slider.php dan ketik kode dibawah
1.
<?php
2.
$conn = mysqli_connect("localhost","root","","slideshowtoko");
3.
$result = mysqli_query($conn, "SELECT * FROM
slideshow ORDER BY id ASC");
4.
if (!$result) {
5.
echo mysqli_error($conn);
6.
}
7.
?>
8.
<!DOCTYPE html>
9.
<html lang="en">
10. <head>
11. <meta charset="UTF-8">
12. <meta name="viewport" content="width=device-width,
initial-scale=1.0">
13. <meta http-equiv="X-UA-Compatible" content="ie=edge">
14. <title>Slider</title>
15. <link rel="stylesheet" href="style.css">
16. </head>
17. <body>
18. <slider>
19. <?php while ($slide = mysqli_fetch_assoc($result)) : ?>
20. <slide>
21. <img src="img/<?= $slide["gambar"]; ?>" style="width:
1366px; height: 700px;">
22. <center><p><?= $slide["ket"]; ?></p></center>
23. </slide>
24. <?php endwhile ?>
25. </slider>
26. </body>
27. </html>
21. Buatlah file style.css dan ketik kode berikut untuk mempercantik tampilan
slideshow
1.
*{
2.
top: 0;
3.
left: 0;
4.
right: 0;
5.
bottom: 0;
6.
margin: 0;
7.
padding: 0;
8.
}
9.
body{
10. width: 1366px;
11. height: 657px;
12. padding: 0;
13. margin: 0px;
14. }
15. slider{
16. display: inline-block;
17. width: 100%;
18. height: 100%;
19. background:#1f1f1f;
20. overflow: hidden;
21. position: absolute;
22. }
23. slider > * {
24. position: absolute;
25. display: inline-block;
26. width: 100%;
27. height: 775px;
28. background: #1f1f1f;
29. animation: slide 61s
infinite;
30. overflow: hidden;
31. }
32. slide:nth-child(1) {
33. left: 0%;
34. animation-delay: 1s;
35. background-size: cover;
36. background-position: center;
37. }
38. slide:nth-child(2) {
39. animation-delay: 11s;
40. background-size: cover;
41. background-position: center;
42. }
43. slide:nth-child(3) {
44. animation-delay: 21s;
45. background-size: cover;
46. background-position: center;
47. }
48. slide:nth-child(4) {
49. animation-delay: 31s;
50. background-size: cover;
51. background-position: center;
52. }
53. slide:nth-child(5) {
54. animation-delay: 41s;
55. background-size: cover;
56. background-position: center;
57. }
58. slide:nth-child(6) {
59. animation-delay: 51s;
60. background-size: cover;
61. background-position: center;
62. }
63. slide p{
64. font-family: Instant
Noodle;
65. font-size: 45px;
66. display: inline;
67. color: #fff;
68. margin-top: -350px;
69. text-align: center;
70. }
71. @keyframes slide{
72. 0%
{ left: 100%; width: 100%; }
73. 5%
{ left: 0%; }
74. 25%
{ left: 0%; }
75. 30%
{ left: -100%; width: 100%; }
76. 30.0001%
{ left: -100%; width: 0%; }
77. 100%
{ left: 100%; width: 0%; }
78. }
Selesai...
Comments
Post a Comment