Membuat Portal Berita Sederhana dengan HTML, PHP, CSS (bootsrap), dan Javascript

Apakabar semua.. semoga selalu sehat dan baik hatinya :D. Kali ini saya akan memberikan sedikit tutorial untuk membuat Portal Berita Sederhana. Komponen yang akan digunakan tetap sama, yaitu PHP, HTML, JavaScript, dan CSS yang kali ini saya gunakan dari Bootsrap. Seperti biasanya, hal-hal yang harus dipersiapkan adalah Server Apache, Mysql, Browser, dan Editor. Oke, tidak berlama-lama, kita akan memulai tahap pertama. Oia, sebelumnya, kira-kira hasil akhirnya akan tampak seperti ini:

Gambar tampilan portal berita sederhana

Pertama, siapkan susunan folder, dengan root folder adalah berita, kemudian subfoldernya adalah css, gambar, dan js, jangan lupa letakkan folder berita didalam folder htdocs atau www server apache Anda. sebagai berikut.

Gambar susunan folder berita

Kedua, buat database dan tabel sebagai berikut. (bisa menggunakan database dari postingan sebelumnya) jadi tinggal menambahkan tabel saja.

Gambar struktur tabel berita
Ketiga, buat file untuk melakukan koneksi antara PHP dengan MySQL.

filename: koneksi.php

1:  <?php  
2:  $server  = "localhost";  
3:  $username = "root";  
4:  $password = "password";  
5:  $database = "db_latihan";  
6:  $koneksi = mysql_connect($server,$username,$password) or die ('Koneksi gagal');  
7:  if($koneksi){  
8:   mysql_select_db($database) or die ('Database belum dibuat');   
9:  }  
10:  ?>

Keempat, silahkan buat tampilan halaman utama, atau biasa disebut dengan HOME atau BERANDA. dalam hal ini saya akan menggunakan file index, agar kita tidak perlu membuat lagi tampilan yang sama.

filename: index.php

1:  <html>  
2:   <head>  
3:   <title>BSI News</title>  
4:   <!-- Bootstrap -->  
5:     <link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">  
6:     <link href="./css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">  
7:     <link href="./css/bootswatch.css" rel="stylesheet" media="screen">  
8:     <script type="text/javascript">  
9:     function printValue(sliderID, textbox) {  
10:        var x = document.getElementById(textbox);  
11:        var y = document.getElementById(sliderID);  
12:        x.value = y.value;  
13:      }  
14:     </script>  
15:   </head>  
16:   <body>  
17:   <div class="navbar navbar-inverse navbar-fixed-top">  
18:    <div class="navbar-inner">  
19:    <div class="container-fluid">  
20:     <a class="brand" href="index.php">BSI News</a>  
21:     <div class="nav-collapse collapse">  
22:     <ul class="nav">  
23:      <li><a class="brand" style="margin-left:85px;">by Erfian Junianto</a></li>  
24:     </ul>  
25:     </div>  
26:    </div>  
27:    </div>  
28:   </div>  
29:     <div class="container-fluid">  
30:    <div class="row-fluid">  
31:    <div class="span3">  
32:     <?php include("menuBerita.php");?>  
33:          </div><!--/span-->  
34:          <div class="span9">  
35:           <!--letak konten-->  
36:            <?php  
37:     if(empty($_GET['link']))  
38:             include "lihatBerita.php";  
39:     else  
40:      include($_GET['link']);     
41:     ?>  
42:    </div><!--/span-->  
43:    </div><!--/row-->  
44:    <hr>  
45:    <footer>  
46:    <p>Fakultas Teknik (2014) © Erfian Junianto</p>  
47:    </footer>  
48:     </div><!--/.fluid-container-->  
49:     <script src="./js/latest.js"></script>  
50:     <script src="./js/bootstrap.min.js"></script>  
51:   </body>  
52:  </html>

Gambar Tampilan halaman index

Kelima, silahkan buat tampilan untuk form input berita, disini saya akan menggunakan objek file, karena kita akan menggunakan gambar yang akan kita Upload ke server.

filename: tambahBerita.php

1:  <h2>Masukkan berita</h2>  
2:  <form class="form-horizontal" method="post" action="simpanBerita.php" name="frmBerita" enctype="multipart/form-data">  
3:   <div class="control-group">  
4:    <label class="control-label" for="inputJudul">Judul</label>  
5:    <div class="controls">  
6:     <input type="text" class="span12" placeholder="Judul Berita" name="jdl_berita" required >  
7:    </div>  
8:   </div>  
9:   <div class="control-group">  
10:    <label class="control-label" for="inputIsiBerita">Isi Berita</label>  
11:    <div class="controls">  
12:     <textarea rows="5" cols="40" class="span12" name="isi_berita" required></textarea>  
13:    </div>  
14:   </div>  
15:   <div class="control-group">  
16:    <label class="control-label" for="inputGambar">Gambar Berita</label>  
17:    <div class="controls">  
18:     <input type="file" id="inputGambar" name="gbr_berita" required>  
19:    </div>  
20:   </div>  
21:   <div class="control-group">  
22:    <div class="controls">  
23:     <button type="submit" class="btn btn-primary">Post</button>  
24:     <button type="reset" class="btn btn-inverse">Cancel</button>  
25:    </div>  
26:   </div>  
27:  </form>

Akan menghasilkan tampilan sebagai berikut:

Gambar tampilan input berita

Keenam, buatlah file untuk menyimpan berita ke dalam database, dan mengupload gambar ke server.

filename: simpanBerita.php

1:  <?php  
2:  include "koneksi.php";  
3:  $judul_berita = addslashes($_POST['jdl_berita']);  
4:  $isi_berita = addslashes($_POST['isi_berita']);  
5:  $tgl_berita = date('d M Y H:i');  
6:  #tangkap gambar  
7:  $namafolder="gambar/"; //folder tempat menyimpan file  
8:  if (!empty($_FILES["gbr_berita"]["tmp_name"]))  
9:  {  
10:    $jenis_gambar=$_FILES['gbr_berita']['type'];  
11:    if($jenis_gambar=="image/jpeg" || $jenis_gambar=="image/jpg" || $jenis_gambar=="image/gif" || $jenis_gambar=="image/png")  
12:    {        
13:      $gambar = $namafolder . basename($_FILES['gbr_berita']['name']);      
14:      if (move_uploaded_file($_FILES['gbr_berita']['tmp_name'], $gambar)) {  
15:        mysql_query("insert into tbl_berita values ('','$judul_berita','$isi_berita','$tgl_berita','$gambar')",$koneksi);   
16:     ?>  
17:    <script language="javascript">  
18:            alert('Berhasil menambahkan');  
19:            document.location="index.php?link=lihatBerita.php";  
20:          </script>  
21:     <?php  
22:      } else {  
23:       ?>  
24:    <script language="javascript">  
25:            alert('Gagal menambahkan');  
26:            document.location="index.php?link=tambahBerita.php";  
27:          </script>  
28:     <?php  
29:      }  
30:    } else {  
31:      ?>  
32:    <script language="javascript">  
33:          alert('Gambar harus berformat .jpg .png .gif');  
34:          document.location="index.php?tambahBerita.php";  
35:        </script>  
36:     <?php  
37:    }  
38:  } else {  
39:    echo "Anda belum memilih gambar";  
40:  }  
41:  ?>

Ketujuh, buat sebuah file untuk menampilkan hasil input berita, atau sering disebut dengan halaman Posting.

filename: lihatBerita.php

1:  <?php  
2:  include "koneksi.php";  
3:  $ambil_data = mysql_query("select * from tbl_berita order by id_berita desc limit 0,5",$koneksi);  
4:  while($hasil_data = mysql_fetch_array($ambil_data)){  
5:  ?>  
6:   <div class="row-fluid">  
7:     <div class="span4">  
8:      <img data-src="holder.js/300x200" alt="300x200" src="<?=$hasil_data['gambar'];?>" style="width: 300px; height: 200px;">  
9:     </div>  
10:     <div class="span8">  
11:       <h2><?=$hasil_data['judul'];?></h2>  
12:       <p style="text-align:justify;"><?=substr($hasil_data['isi'],0,500);?></p>  
13:       <p>  
14:        <a href="index.php?link=lihatDetailBerita.php&id=<?=$hasil_data['id_berita'];?>" class="btn btn-primary">Baca Selengkapnya</a>   
15:        <a href="#" class="btn btn-inverse">Diposkan pada <?=$hasil_data['tanggal'];?></a>  
16:       </p>  
17:     </div>     
18:    </div>  
19:    <hr>  
20:  <?php  
21:  }  
22:  ?>

Akan menghasilkan tampilan sebagai berikut:

Gambar Tampilan lihat berita (posting)

Kedelapan, yang harus dibuat setelah halaman posting adalah, halaman detail posting. Biasanya, halaman awal sebuah Portal Berita hanya menampilkan sekilas tentang isi berita. Perlu disediakan halaman untuk membaca detail berita, jika pengguna menginginkan untuk membaca berita yang dipilil. Biasanya menggunakan tombol Read More.

filename: lihatDetailBerita.php

1:  <?php  
2:  include "koneksi.php";  
3:  $ambil_data = mysql_query("select * from tbl_berita where id_berita='$_GET[id]'",$koneksi);  
4:  $hasil_data = mysql_fetch_array($ambil_data);  
5:  ?>  
6:  <div class="paragraphs">  
7:   <div class="row">  
8:    <div class="span12 well">  
9:     <img class="img-polaroid" src="<?=$hasil_data['gambar'];?>" style="width:250px; height: 200px; float:left; margin-right:10px;"/>  
10:     <div class="content-heading"><h3><?=$hasil_data['judul'];?></h3></div>  
11:     <p><a href="#" class="btn btn-inverse">Diposkan pada <?=$hasil_data['tanggal'];?></a> </p>  
12:     <p style="text-align:justify;"><?=$hasil_data['isi'];?></p>  
13:     <div style="clear:both;"></div>  
14:    </div>  
15:   </div>  
16:  </div>

Gambar tampilan detail berita

Langkah kesembilan, kita akan membuat menu berita, untuk menampilkan form input berita dan halaman posting berita.

filename: menuBerita.php

1:  <?php  
2:  include "koneksi.php";  
3:  $ambil_recent = mysql_query("select id_berita,judul,tanggal from tbl_berita order by rand() limit 20",$koneksi);  
4:  ?>  
5:  <div class="well sidebar-nav">  
6:    <ul class="nav nav-list">  
7:      <li class="nav-header">Menu</li>  
8:      <li><a href="index.php?link=tambahBerita.php">→ Tambah Berita</a></li>  
9:      <li><a href="index.php?link=lihatBerita.php">→ Lihat Berita</a></li>  
10:      <li class="nav-header">Baca Juga</li>  
11:      <ul type="square">  
12:       <?php  
13:    while($hasil_recent= mysql_fetch_array($ambil_recent)){  
14:        echo "<li><a href='index.php?link=lihatDetailBerita.php&id=$hasil_recent[id_berita]'>".$hasil_recent['judul']."</a></li>";  
15:    }  
16:    ?>  
17:      </ul>  
18:    </ul>  
19:  </div><!--/.well ko-->

Gambar tampilan menu berita

Langkah selanjutnya adalah membuat CSS, ada 3 buah css yang akan kita buat, (Karena file terlalu panjang, Anda bisa mengunduhnya disini). Setelah diunduh ekstrak file tersebut dan letakkan didalam folder css.

filename: bootstrap.min.css
filename: bootstrap-responsive.min.css
filename: bootswatch.css

Terakhir, kita akan membuat file Javascript yang akan diletakkan didalam folder js. Ada 2 buah file js, yaitu: (Karena file terlalu panjang, Anda bisa mengunduhnya disini). Setelah diunduh ekstrak file tersebut dan letakkan didalam folder js.

filename: bootstrap.min.js
filename: jquery-latest.js

Untuk melihat hasilnya, bisa melihatnya melalui link berikut Demo
Untuk mengunduh file lengkapnya (kecuali database), klik link berikut ~~Download Code~~
UPDATE:
~~Link download full code disini~~
Link download full code disini. Update Tanggal 08-05-2016

6 Responses to " Membuat Portal Berita Sederhana dengan HTML, PHP, CSS (bootsrap), dan Javascript "

Unknown12/12/2014 2:47 pm
hatur nuhun
Unknown12/12/2014 3:15 pm
sama-sama :D
Unknown5/10/2015 8:02 pm
keren bgd terima kasihh bgd yah gan... hidup BSI
Unknown5/11/2015 1:00 pm
Sama-sama, jika mau request tentang tutorial yang lain seputar WEB dan DATABASE, dipersilahkan.. :)
Unknown10/19/2015 4:04 pm
komentarnya mana :-d
Muhammad Genta11/07/2020 5:41 am
thanks bangettt,sangt membantu untuk project saya yang diwajibkan untuk mengirim berita/info kepada siswa,,Mantapppp