Pilih Laman

suumber : https://www.awonapa.com/2021/06/tutorial-membuat-blog-dengan-php-mysql.html

Halo teman-teman semua, selamat datang kembali pada Web Blog kami, yaitu Awonapa Jr. Pada kesempatan ini kita akan sharing mengenai Tutorial Website Developer, Yaitu Membuat Website Blog Menggunakan PHP MYSQL.

Membuat Website Blog Menggunakan PHP MySQL

Web Blog ini berjudul, Awonapa Bonsai – Menjual Produk Tanaman Bonsai. Tujuan awal membuat website ini adalah untuk Tugas Akhir di Kampus, selain itu untuk referensi / dokumentasi membuat web blog sederhana.

Hal yang harus teman-teman siapkan yaitu :

hal-hal diatas adalah hal minimal yang harus teman-teman ketahui . Beda ya kalau cuma copy paste gausah paham” amat :). Oke langsung ke inti aja.

Membuat Website Blog Menggunakan PHP MySQL

Pertama buat folder TA di dalam folder xampp/htdocs, lalu jalankan XAMPP teman-teman terlebih dahulu, lalu buka teks editornya.

Halaman Home Website Blog ( index.php)

<?php
require 'func.php'
?>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="style.css">
		<title>Awonapa Bonsai - Menjual Produk Tanaman Bonsai</title>
	</head>
	<body>
		<div class="container">
			<div class="header text-center text-light">
				<h3 style="padding: 20px;">Awonapa Bonsai</h3>
				<div class="banner">
					<img src="bonsai.png" alt="">
				</div>
			</div><hr>
			<nav class="navigasi">
				<ul>
					<li><a href="index.php">Home</a></li>
					<li><a href="admin/admin.php">Admin Page</a></li>
				</ul>
			</nav>
			<div class="section">
				<hr>
				<marquee behavior="" direction=""><b>Selamat Datang Di Awonapa Bonsai - Menjual Produk Tanaman Bonsai</b></marquee>
				<hr>
				<br>
			</div>
			<div class="center">
				<?php
						$sql = "select * from t_artikel order by id asc";
						$res = mysqli_query($con, $sql);
						while ($data = mysqli_fetch_array($res)) {
							if(strlen($data["isi"] >= 40)) {
								echo $data["isi"];
							} else {
								$z = '....';
								$y = substr($data["isi"],0,320) .'<br><a href=detail.php?id='.$data["id"].'><button class="btn-info">Baca Selengkapnya</button></a>';
					};
				?>
				<div class="box">
					<div class="isi" align="justify">
						<h2 style="margin-bottom: 5px"><?php echo $data["judul"]; ?></h2>
						<hr>
						<p class="by">by wahyu pambudi</p>
						<hr>
						<br>
						<div class="left">
						<img width="100%" height="150px" src="img/<?php echo $data['gambar'];?>"/>
						</div>
						<p style="margin-top: 5px"><?php echo $y; ?></p><br><hr>	
					</div>
				</div>
				<?php
					}
				?>
			</div>
			<div class="right">
				<div class="box">
					<div class="isi" align="center">
						<h3>Profil Developer</h3><br>
						<img width="100%" src="img/wahyu.jpg" alt="wahyu" style="border-radius: 50%"><br>
						<div style="margin: 10px; display: inline;">
							<p>Wahyu Pambudi</p>
							<p>19312302</p>
							<p>Informatika 19 GX</p>
							<a href="https://api.whatsapp.com/send?phone=6289682787161&text=Assalamualaikum%20Wr%20Wb"><button class="btn-info">WhatsApp</button></a>
							<a href="https://www.linkedin.com/in/wahyup9/"><button class="btn-info">LinkedIn</button></a>
						</div>
					</div>
				</div>
				<div class="box">
					<div class="isi">
						<h3>Artikel Terbaru</h3>
						<?php
							$sql = "select id, judul, gambar from t_artikel order by id desc";
							$res = mysqli_query($con, $sql);
							$no = 0;
							while ($data = mysqli_fetch_array($res)) {
						?>
						<div style="margin-bottom: 5px;">
							<fieldset style="text-align: center; border-color: #F3F1F1">
								<legend>
									<h6 href="" style="padding: 5px; font-size: 15px;"><?php echo $data["judul"]; ?></h6>
								</legend>
								<img style="padding: 10px;" width="100%" height="150px" src="img/<?php echo $data['gambar'];?>"/>
								<a href="detail.php?id=<?php echo($data['id'])?>"><button class="btn-info">Baca Selengkapnya</button></a>
							</fieldset>
						</div>
						<?php
						}
						?>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Pada kodingan diatas, saya memanggil func.php yang berguna untuk menghubungkan halaman web ke Database MySQL nya.

Mengkoneksikan ke Database (func.php)

<?php 
	$con = mysqli_connect("localhost", "root", "", "db_artikel");

	if(!$con) {
		die("Koneksi Gagal : ". mysqli_connect_error());
	};
?>

Untuk menghubungkan halaman web ke MySQL menggunakan perintah

mysqli_connect

Header Website Untuk Admin Page (header.php)

Pada file ini, nantinya akan dipanggil pada halaman atau pada file admin.php. atau juga bisa digunakan di halaman lain. Cara memanggilnya seperti ini ( <?php require ‘header.php’?> )

<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.0">
    <link rel="stylesheet" href="style.css">
    <title>Header</title>
</head>

<body>
    <div class="container header text-center text-light">
        <h3 style="padding: 20px;">Awonapa Bonsai</h3>
    </div>
</body>

</html>

maka akan menampilkan hasil seperti ini

header.php

Membuat Detail Artikel (detail.php)

Detail artikel, berfungsi untuk melihat atau membaca secara keseluruhan dari artikel yang ada pada index.php atau homepage.

Halaman Detail Artikel

Berikut ini Sintak detial.php nya.

<?php
require 'func.php'
?>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="style.css">
	<!-- <title>Awonapa Bonsai - Menjual Produk Tanaman Bonsai</title> -->
</head>

<body>
	<div class="container">
		<div class="header text-center text-light">
			<h3 style="padding: 20px;">Awonapa Bonsai</h3>
			<div class="banner">
				<img src="bonsai.png" alt="">
			</div>
		</div>
		<hr>
		<nav class="navigasi">
			<ul>
				<li><a class="active" href="index.php">Home</a></li>
				<li><a href="admin/admin.php">Admin Page</a></li>
			</ul>
		</nav>
		<div class="section">
			<hr>
				<marquee behavior="" direction=""><b>Selamat Datang Di Awonapa Bonsai - Menjual Produk Tanaman Bonsai</b></marquee>
			<hr>
			<br>
		</div>
		<div class="center">
			<div class="box">
				<?php
						$id = $_GET["id"] ;
						$sql = "select * from t_artikel WHERE id = '$id'";
						$res = mysqli_query($con, $sql);
						while ($data = mysqli_fetch_array($res)) {
					?>

				<div class="isi" align="justify">
					<h2><?php echo $data["judul"]; ?></h2>
					<title><?php echo $data["judul"]; ?></title>
					<hr>
					<p class="by">by wahyu pambudi</p>
					<hr>
					<br>
					<img width="100%" src="img/<?php echo $data['gambar'];?>"/>
					<p style="margin-top: 5px"><?php echo $data["isi"]; ?></p><br><br>
					<div align="center">
						<a href="https://wa.me/6289682787161?text= Saya Mau Beli  <?php echo $data["judul"];  ?>" target="_blank"><button class="btn-info">Beli Melalui Whatsapp!!</button></a>
					</div>
					<hr>
				</div>
				<?php
					}
					?>
					
				<?php
							$id = $_GET["id"];
							$before = $id - 1;
							$after = $id + 1;
							$first = "SELECT id FROM t_artikel ORDER BY id ASC LIMIT 1";
							$res_f = mysqli_query($con, $first);
							$sql_a = "select * from t_artikel WHERE id = '$before'";
							$sql_b = "select * from t_artikel WHERE id = '$after'";
							$res_a = mysqli_query($con, $sql_a);
							$res_b = mysqli_query($con, $sql_b);
							while ($data = mysqli_fetch_array($res_a)) {
					?>
				<a href="detail.php?id=<?php echo($data['id'])?>"><button>Sebelumnya</button></a>
				<!-- <a href="index.php"><button>Kembali</button></a> -->
				<?php
					} while ($data = mysqli_fetch_array($res_b)) {
						while ($dataa = mysqli_fetch_array($res_f)) {
						if($dataa[0]) {
							?>
								<a href="index.php"><button>Kembali</button></a>
						<?php
						}
					};
						?>
				<a href="detail.php?id=<?php echo($data['id'])?>"><button>Berikutnya</button></a>
				<?php
					}
					?>
			</div>
		</div>
		<div class="right">
				<div class="box">
					<div class="isi" align="center">
						<h3>Profil Developer</h3><br>
						<img width="100%" src="img/wahyu.jpg" alt="wahyu" style="border-radius: 50%"><br>
						<div style="margin: 10px; display: inline;">
							<p>Wahyu Pambudi</p>
							<p>19312302</p>
							<p>Informatika 19 GX</p>
							<a href="https://api.whatsapp.com/send?phone=6289682787161&text=Assalamualaikum%20Wr%20Wb"><button class="btn-info">WhatsApp</button></a>
							<a href="https://www.linkedin.com/in/wahyup9/"><button class="btn-info">LinkedIn</button></a>
						</div>
					</div>
				</div>
				<div class="box">
					<div class="isi">
						<h3>Artikel Terbaru</h3>
						<?php
							$sql = "select id, judul, gambar from t_artikel order by id desc";
							$res = mysqli_query($con, $sql);
							$no = 0;
							while ($data = mysqli_fetch_array($res)) {
						?>
						<div style="margin-bottom: 5px;">
							<fieldset style="text-align: center; border-color: #F3F1F1">
								<legend>
									<h6 href="" style="padding: 5px; font-size: 15px;"><?php echo $data["judul"]; ?></h6>
								</legend>
								<a href="detail.php?id=<?php echo($data['id'])?>"><button class="btn-info">Baca Selengkapnya</button></a>
							</fieldset>
						</div>
						<?php
						}
						?>
					</div>
				</div>
			</div>
	</div>
	<div style="margin-bottom: 200px">

	</div>
</body>

</html>

Membuat Admin Page

Sebelum membuat halaman admin page, pastikan teman-teman sudah membuat folder dengan nama admin di dalam folder TA terlebih dahulu.

Membuat Halaman Admin (admin.php)

<?php require '../func.php' ?>
<?php
if(isset($_GET['delete'])) {
$id = $_GET['delete'];
$query = mysqli_query($con, "DELETE FROM t_artikel WHERE id='$id'");
header("Location: admin.php");
}
?>
<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.0">
    <link rel="stylesheet" href="../style.css">
    <title>Admin</title>
    <style>
    textarea,
    select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    }
    input[type=text],
    select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    }
    input[type=file],
    select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: white;
    }
    input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    }
    input[type=submit]:hover {
    background-color: #45a049;
    }
    div {
    border-radius: 5px;
    /*background: linear-gradient(to right, #45a049, #1cb5e0);*/
    padding: 20px;
    }
    </style>
  </head>
  <body>
    <?php
    $page = @$_GET['page'];
    if($page == "add") {
    include 'add.php';
    }
    ?>
    <div class="container">
      <hr>
      <h3 align="center" class="text-dark">Admin Page Awonapa Bonsai</h3>
      <hr><br>
      <a href="../index.php"><button class="button">Kembali</button></a>
      <a href="?page=add"><button class="btn-info">Add Article</button></a><br>
      <div>
        <h3>List Article</h3>
        <?php
        $sql = "select id, judul from t_artikel order by id asc";
        $res = mysqli_query($con, $sql);
        while ($data = mysqli_fetch_array($res)) {
        ?>
        <div align="justify">
          <span><?php echo $data["judul"]; ?></span>
          <a href="admin.php?delete=<?php echo $data["id"] ?>"><button class="button">Delete</button></a><hr>
        </div>
        <?php
        }
        ?>
      </div>
    </div>
    
  </body>
</html>

Membuat Halaman Add Artikel (add.php)

Halaman Add Artikel ini akan muncul ketika kita mengklik button add article.

Button Membuat Halaman Add Artikel

Berikut sintak nya :

<div class="container">
    
    <div class="" style="padding: 10px">
      <!-- <h3 class="text-center text-dark">Add Article</h3> -->
      <a href="admin.php"><button class="btn-danger">Close</button></a>
      <h4 align="center" class="btn-info">Add Article Page</h4>
      <?php
        function input($data)
        {
        $data = trim($data);
        $data = stripslashes($data);
        $data = htmlspecialchars($data);
        return $data;
        }
        if (isset($_POST["add_post"])) {
          
          $judul = input($_POST["judul"]);
          $gambar = @$_FILES['gambar']['name'];
          $tmp = @$_FILES['gambar']['tmp_name'];
          $gambarbaru = date ('dmYis').$gambar;
          $path = "../img/".$gambarbaru;
          $isi = input($_POST["isi"]);

      if(move_uploaded_file($tmp, $path)) {
          $sql = "insert into t_artikel (judul,gambar,isi) values ('$judul','$gambarbaru','$isi')";
          $hasil = mysqli_query($con, $sql);

            if ($hasil ) {
              header("Location:../index.php");
            } else{
              echo "Pesan Error ". mysqli_error($con);
            }
        }
      }
        ?>
      <form action="" method="post" enctype="multipart/form-data">
        <div class="u_form">
          <input type="text" name="judul" placeholder="Article Title" required />
        </div>
        <div class="u_form">
          <input type="file" name="gambar" placeholder="Input Image" required />
        </div>
        <div class="u_form">
          <!-- <input type="text" name="isi" placeholder="Isi Artikel" required /> -->
          <textarea name="isi" rows="5" placeholder="Input Article Content" required
            style="height: 150px"></textarea>
        </div>
        <button type="submit" name="add_post">Submit</button>
      </form>
    </div>
  </div>

Membuat Folder img untuk gambar

Berikutnya jangan lupa untuk membuat folder img pada folder TA karena folder ini akan menampung hasil gambar yang akan di upload pada halaman admin/add article.