Tutorial buat website berita super simple sekali seperti tanpa css

By AITech 3/07/2021

Halo teman-teman kali ini gw akan share gimana sih buat website berita simple engga usah ribet-ribet banget biar gak pusing dah intinya. ini versi updatenya ya pakai MSQLI. Dah langsung aja ke tutorialnya.

Buat database di phpmyadmin (MySQL) seperti gambar dibawah ini:

Kode SQLnya:

  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
-- phpMyAdmin SQL Dump
-- version 4.9.2
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 07 Mar 2021 pada 03.55
-- Versi server: 10.4.11-MariaDB
-- Versi PHP: 7.4.1

/*
-------------------------------------
-- By freeware-aitech.blogspot.com --
-------------------------------------
*/

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_berita`
--

-- --------------------------------------------------------

--
-- Struktur dari tabel `berita`
--

CREATE TABLE `berita` (
  `id_berita` int(8) NOT NULL,
  `id_kategori` int(5) NOT NULL,
  `judul` varchar(100) NOT NULL,
  `headline` varchar(150) NOT NULL,
  `isi` text NOT NULL,
  `pengirim` varchar(15) NOT NULL,
  `tanggal` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `berita`
--

INSERT INTO `berita` (`id_berita`, `id_kategori`, `judul`, `headline`, `isi`, `pengirim`, `tanggal`) VALUES
(1, 1, 'COVID-19', 'Virus ini sekarang telah bermutasi makin jago!', 'Harap waspada karena virus covid ini telah mengupgrade diri menjadi lebih kuat.', 'KompasKanan', '2021-03-05');

-- --------------------------------------------------------

--
-- Struktur dari tabel `kategori`
--

CREATE TABLE `kategori` (
  `id_kategori` int(5) NOT NULL,
  `nm_kategori` varchar(30) NOT NULL,
  `deskripsi` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data untuk tabel `kategori`
--

INSERT INTO `kategori` (`id_kategori`, `nm_kategori`, `deskripsi`) VALUES
(1, 'VIRUS', 'Penyakit menular'),
(2, 'Bakteri', 'Jadi Bakteri dong');

--
-- Indexes for dumped tables
--

--
-- Indeks untuk tabel `berita`
--
ALTER TABLE `berita`
  ADD PRIMARY KEY (`id_berita`),
  ADD UNIQUE KEY `id_kategori` (`id_kategori`);

--
-- Indeks untuk tabel `kategori`
--
ALTER TABLE `kategori`
  ADD PRIMARY KEY (`id_kategori`);

--
-- AUTO_INCREMENT untuk tabel yang dibuang
--

--
-- AUTO_INCREMENT untuk tabel `berita`
--
ALTER TABLE `berita`
  MODIFY `id_berita` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

--
-- AUTO_INCREMENT untuk tabel `kategori`
--
ALTER TABLE `kategori`
  MODIFY `id_kategori` int(5) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

--
-- Ketidakleluasaan untuk tabel pelimpahan (Dumped Tables)
--

--
-- Ketidakleluasaan untuk tabel `berita`
--
ALTER TABLE `berita`
  ADD CONSTRAINT `berita_ibfk_1` FOREIGN KEY (`id_kategori`) REFERENCES `kategori` (`id_kategori`);
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Lalu buat folder baru dulu di htdocs. terus isi file-file dibawah ini.

1. Konekin ke database MySQL.

Buat file dengan nama: db_connection.php
isikan dengan kode php di bawah ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<?php
function OpenCon()
 {
 $dbhost = "localhost";
 $dbuser = "root";
 $dbpass = "";
 $db = "db_berita";
 $conn = new mysqli($dbhost, $dbuser, $dbpass,$db) or die("Gagal Konek ke DB!: %s\n". $conn -> error);
 
 return $conn;
 }
 
function CloseCon($conn)
 {
 $conn -> close();
 }
?>

Inget ubah nama database sesuai yg kalian buat!.

2. Membuat halaman utama

Buat file dengan nama: index.php
isikan dengan kode di bawah 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
28
29
30
31
32
33
34
35
36
37
38
<?php
include 'db_connection.php';
$conn = OpenCon();
?>
<html>
	<head>
		<title>Website Berita</title>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<a href="index.php">Halaman Depan</a>
		<a href="arsip_berita.php">Arsip Berita</a>
		<a href="input_berita.php">Input Berita</a>
		<h2>Halaman Depan - Berita Terbaru</h2>
		
		<?php
		
		$result=mysqli_query($conn,'SELECT * FROM berita ');

		while($row=mysqli_fetch_array($result)) {
			$id_berita = $row['id_berita'];
			$id_kategori = $row['id_kategori'];
			$judul = $row['judul'];
			$headline = $row['headline'];
			$pengirim = $row['pengirim'];
			$tanggal = $row['tanggal'];
			
			
			echo "<font size=4> <a href='berita_lengkap.php?id=$id_berita'>$judul</a></font></br>";
			echo "<small>Berita dikirimkan oleh <b>$pengirim</b> pada tanggal <b>$tanggal</b> dalam kategori <b>$id_kategori</b></small>";
			echo "<p>" . $headline . "</p>";
			echo "<hr>";
		}
	
		?>
		
	</body>
</html>

3. Membuat halaman input berita

Buat file dengan nama: input_berita.php
Isikan dengan kode di bawah 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
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
<?php  
include "db_connection.php";
$conn = OpenCon();
//proses input berita  
if(isset($_POST['input'])){
	
	$judul = addslashes(strip_tags($_POST['judul']));
	$kategori = $_POST['kategori'];
	$headline = addslashes(strip_tags($_POST['headline']));
	
	$isi_berita = addslashes(strip_tags($_POST['isi']));
	$pengirim = addslashes(strip_tags($_POST['pengirim']));
	
	//insert ke tabel
	$query = "INSERT INTO berita VALUES('','$kategori','$judul','$headline','$isi_berita','$pengirim',now())";
	$sql = mysqli_query($conn,$query);
	if($sql){
		echo "<h2><span style='color: blue;'>Berita telah berhasil ditambahkan</span></h2>";
	}else{
		echo "<h2><span style='color: red;'>Berita gagal ditambahkan</span></h2>";
	}
}
?>  
<html>
	<head><title>Input Berita</title>
		<link href="css/style.css" rel="stylesheet"></link>  
    </head>  
    <body>
		<a href="index.php">Halaman Depan</a>
		<a href="arsip_berita.php">Arsip Berita</a>
		<a href="input_berita.php">Input Berita</a>  
      
		
		<form action="" method="post" name="input">
			<table border="0" cellpadding="0" style="width: 700px;">
				<tr>
					<td colspan="2"><h2>Input Berita</h2>
					</td>
				</tr>
				<tr>
					<td width="200">Judul Berita</td>
					<td>: <input name="judul" size="30" type="text" /></td>
				</tr>
				<tr>
					<td>Kategori</td>
					<td>:
						<select name="kategori">
							<?php
							$query = "SELECT id_kategori, nm_kategori FROM kategori ORDER BY nm_kategori";
							$sql = mysqli_query($conn,$query);
							while($hasil = mysqli_fetch_array($sql)){
								echo "<option value='".$hasil[id_kategori]."'>$hasil[nm_kategori]</option>";
							}
							?>
						</select>
					</td>
				</tr>
				<tr>
					<td>Headline Berita</td>
					<td>: <textarea cols="50" name="headline" rows="4"></textarea></td>
				</tr>
				<tr>
					<td>Isi Berita</td>
					<td>: <textarea cols="50" name="isi" rows="10"></textarea></td>
				</tr>
				<tr>
					<td>Pengirim</td>
					<td>: <input name="pengirim" size="30" type="text" /></td>
				</tr>
				<tr>
					<td> </td>
					<td>
						<input name="input" type="submit" value="Input Berita" />
						<input name="reset" type="reset" value="Cancel" /></td>
				</tr>
			</table>
		</form>
</body>  
</html>

4. Membuat arsip berita

Buat file dengan nama: arsip_berita.php
Isikan dengan kode di bawah 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<?php  
include "db_connection.php";
$conn = OpenCon();
?>  
<html>  
<title>Arsip Berita</title>  
    <link href="css/style.css" rel="stylesheet">
      <script language="javascript">  
        function tanya(){  
      if(confirm("Apakah anda yakin akan menghapus berita ini?")){  
    return true;   
  }else{  
    return false;   
     }  
   }
      </script>  
   
  
  	<a href="index.php">Halaman Depan</a>   
    <a href="arsip_berita.php">Arsip Berita</a>   
    <a href="input_berita.php">Input Berita</a>  
      
  
  
    <h2>Arsip Berita</h2>  
<ol>  
<?php
	$query = "SELECT A.id_berita, B.nm_kategori, A.judul, A.pengirim, A.tanggal FROM berita A, kategori B WHERE A.id_kategori=B.id_kategori ORDER BY A.id_berita DESC";
	$sql = mysqli_query($conn,$query);
	while($hasil = mysqli_fetch_array($sql)){
		$id_berita = $hasil['id_berita'];
		$kategori = stripslashes($hasil['nm_kategori']);
		$judul = stripslashes($hasil['judul']);
		$pengirim = stripslashes($hasil['pengirim']);
		$tanggal = stripslashes($hasil['tanggal']);
		
		
		echo "<li><a href='berita_lengkap.php?id=$id_berita'>$judul</a>";
		echo "<small>Berita dikirimkkan oleh <b>$pengirim</b> pada tanggal <b>$tanggal</b> dalam kategori <b>$kategori</b> </small>"; 
		echo "<b>Action : </b><a href='edit_berita.php?id=$id_berita'>Edit</a> | ";
		echo "<b>Action : </b><a href='delete_berita.php?id=$id_berita' onclick='return tanya()'>Delete</a>";
		echo "<small></small></li>";
	}  
 ?>  
</ol>  
</html>

5. Membuat halaman untuk mengedit berita

Buat file dengan nama: edit_berita.php
Isikan dengan kode di bawaha 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
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
<?php  
include "db_connection.php";
$conn = OpenCon();
if(isset($_GET['id'])){
	$id_berita = $_GET['id'];  
}else{
	die("Error. No Id Selected!");   
}
$query = "SELECT id_berita, id_kategori,judul, headline, isi, pengirim, tanggal FROM berita WHERE id_berita='$id_berita'";
$sql = mysqli_query($conn,$query);  
$hasil = mysqli_fetch_array($sql);  
$id_berita = $hasil['id_berita'];   
$id_kategori = stripslashes($hasil['id_kategori']);  
$judul = stripslashes($hasil['judul']);  
$headline = stripslashes($hasil['headline']);  
$isi = stripslashes($hasil['isi']);  
$pengirim = stripslashes($hasil['pengirim']);  
$tanggal = stripslashes($hasil['tanggal']);  
  
//proses edit berita  
if(isset($_POST['edit'])){
	$id_berita = $_POST['hidberita'];
	$judul = addslashes(strip_tags($_POST['judul']));
	$kategori = $_POST['kategori'];
	$headline = addslashes(strip_tags($_POST['headline']));
	$isi_berita = addslashes(strip_tags($_POST['isi']));
	$pengirim = addslashes(strip_tags($_POST['pengirim']));
	
	//update berita
	$query = "UPDATE berita SET id_kategori='$kategori', judul='$judul', headline='$headline', isi='$isi_berita', pengirim='$pengirim' WHERE id_berita='$id_berita' ";
	$sql = mysqli_query($conn,$query);
	
	if($sql){
		echo "<h2><span style='color: blue;'>Berita telah berhasil diedit</span></h2>";
	}else{
		echo "<h2><span style='color: red;'>Berita gagal diedit</span></h2>";
	}
}
?>  
<html>  
    <head>
		<title>Edit Berita</title>
		<link href="css/style.css" rel="stylesheet">
	</head>
	
	<body>
		<a href="index.php">Halaman Depan</a>
		<a href="arsip_berita.php">Arsip Berita</a>
		<a href="input_berita.php">Input Berita</a>
		
		
		<form action="" method="post" name="input">
			<table style="width: 700px;" border="0" cellpadding="0">
				<tr>
					<td colspan="2"><h2>Edit Berita</h2></td>
				</tr>
				<tr>
					<td width="200">Judul Berita</td>
					<td>: <input name="judul" size="30" value="<?=$judul?>" type="text"></td>
				</tr>
				<tr>
					<td>Kategori</td>
					<td>: <select name="kategori">
						<?php
								 $query = "SELECT id_kategori, nm_kategori FROM kategori ORDER BY nm_kategori";
								 $sql = mysqli_query($conn,$query);
								 while($hasil = mysqli_fetch_array($sql)){
									 $selected = ($hasil['id_kategori']==$id_kategori)?"selected" :"";
									 echo "<option value='$hasil[id_kategori]'>$hasil[nm_kategori]</option>";
								 }
						?>
						</select>
					</td>
				</tr>
				<tr>
					<td>Headline Berita</td>
					<td>: <textarea cols="50" name="headline" rows="4"><?=$headline?></textarea></td>
				</tr>
				<tr>
					<td>Isi Berita</td>
					<td>: <textarea cols="50" name="isi" rows="10"><?=$isi?></textarea></td>
				</tr>
				<tr>
					<td>Pengirim</td>
					<td>: <input name="pengirim" size="30" value="<?=$pengirim?>" type="text"></td>
				</tr>
				<tr>
					<td> </td>
					<td>
						<input name="hidberita" value="<?=$id_berita?>" type="hidden">
						<input name="edit" value="Edit Berita" type="submit">
						<input name="reset" value="Cancel" type="reset">
					</td>
				</tr>
			</table>
		</form>  
</body>  
</html>

6. Membuat halaman menghapus berita

Buat file dengan nama: delete_berita.php
Isikan dengan kode di bawah 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
28
29
30
31
32
33
34
35
<?php  
include "db_connection.php";
$conn = OpenCon();
if(isset($_GET['id'])){  
 $id_berita = $_GET['id'];  
}else{  
 die("Error. No Id Selected!");   
}  
?>
<html>  
    <head><title>Delete Berita</title>  
     <link href="css/style.css" rel="stylesheet">  
 </head>      
    <a href="index.php">Halaman Depan</a>    
    <a href="arsip_berita.php">Arsip Berita</a>   
    <a href="input_berita.php">Input Berita</a>  
<body>  
<?php
    //proses delete berita  
if(!empty($id_berita)&&$id_berita!=""){  
   $query = "DELETE FROM berita WHERE id_berita='$id_berita'";    
   $sql = mysqli_query($conn,$query);  
   if($sql){  
     echo "<h2>  
  <span style='color: blue;'>Berita telah berhasil dihapus</span></h2>";  
    }else{  
     echo "<h2><span style='color: red;'>Berita gagal dihapus</span></h2>";  
   }  
   echo "klik <a href='arsip_berita.php'>di sini untuk kembali ke halaman arsip berita";  
}else{  
   die("Access Denied");   
 }  
?>  
</body>  
</html>

7. Buat info lengkap beritanya

Buat file dengan nama: berita_lengkap.php
Isikan dengan kode di bawah 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
28
29
30
31
32
33
34
35
36
37
38
<?php  
include "db_connection.php";
$conn = OpenCon();
if(isset($_GET['id'])){  
 $id_berita = $_GET['id'];   
}else{  
 die("Error. No Id Selected!");   
}  
?>  
<html>  
 <head><title>Berita Lengkap</title>  
    <link href="css/style.css" rel="stylesheet"></link>  
    </head>  
    <body>  
    <a href="index.php">Halaman Depan</a>
    <a href="arsip_berita.php">Arsip Berita</a>
    <a href="input_berita.php">Input Berita</a>
  
    <h2>Berita Lengkap</h2>  
<?php

		$query = "SELECT A.id_berita, B.nm_kategori, A.judul, A.isi, A.pengirim, A.tanggal FROM berita A, kategori B WHERE A.id_kategori=B.id_kategori AND A.id_berita='$id_berita'";
		$sql = mysqli_query($conn,$query);
		$hasil = mysqli_fetch_array($sql);
		$id_berita = $hasil['id_berita'];
		$kategori = stripslashes($hasil['nm_kategori']);
		$judul = stripslashes($hasil['judul']);
		$isi = nl2br(stripslashes($hasil['isi']));
		$pengirim = stripslashes($hasil['pengirim']);
		$tanggal = stripslashes($hasil['tanggal']);
		//tampilkan berita
		echo "<font size=5 color=blue>$judul</font>";
		echo "<small>Berita dikirimkan oleh <b>$pengirim</b> pada tanggal <b>$tanggal</b> dalam kategori <b> $kategori</b></small>";
		echo "<p>$isi</p>";  
		
 ?>
</body>  
</html>

8. Tambahan css dikit

Buat folder dengan nama css dan didalem foldernya buat file bernama style.css
Isikan dengan kode di bawah ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
@charset "utf-8";  
/* CSS Document */  
body{  
 font-family:Verdana;  
 font-size:11px;   
}
a{  
 color:#0000ff;  
 text-decoration:underline;  
   
}  
a:hover{  
 color:#ffffff;  
 background-color:#8ac452;  
 text-decoration:none;  
}  
input, textarea, select, option{  
 font-family:Verdana;  
 font-size:12px;   
}


Download Source Code: [Klik Disini]

Bagi kalian yg hanya download source codenya aja, langsung masukin folder htdocs terus ekstrak dah selesai.

PERHATIAN!: Jika gagal ekstrak harap update winrar kalian ke versi terbaru!

Sekian dari tutorial buat website berita sederhana. Terimakasih.

AITech

Author & Editor

Semangat dan pantang menyerah adalah kunci untuk sukses!

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

 
biz.