Cara 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

Gambar struktur tabel berita
postingan sebelumnya) jadi tinggal menambahkan tabel saja.
Ketiga, buat file untuk melakukan koneksi antara PHP dengan MySQL.

filename: koneksi.php



1:  <?php  



2:  $server  = "localhost";  


3:  $username = "root";  


5:  $database = "db_latihan";  


4:  $password = "password";  


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">  


8:     <script type="text/javascript">  


7:     <link href="./css/bootswatch.css" rel="stylesheet" media="screen">  

9:     function printValue(sliderID, textbox) {  


14:     </script>  


10:        var x = document.getElementById(textbox);  

11:        var y = document.getElementById(sliderID);  
12:        x.value = y.value;  
13:      }  

20:     <a class="brand" href="index.php">BSI News</a>  
15:   </head>  
16:   <body>  

17:   <div class="navbar navbar-inverse navbar-fixed-top">  
18:    <div class="navbar-inner">  
19:    <div class="container-fluid">  


25:     </div>  

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>  
26:    </div>  


33:          </div><!--/span-->  

27:    </div>  
28:   </div>  
29:     <div class="container-fluid">  
30:    <div class="row-fluid">  
31:    <div class="span3">  
32:     <?php include("menuBerita.php");?>  


40:      include($_GET['link']);     

34:          <div class="span9">  
35:           <!--letak konten-->  
36:            <?php  
37:     if(empty($_GET['link']))  
38:             include "lihatBerita.php";  
39:     else  
41:     ?>  


49:     <script src="./js/latest.js"></script>  

42:    </div><!--/span-->  
43:    </div><!--/row-->  
44:    <hr>  
45:    <footer>  
46:    <p>Fakultas Teknik (2014) © Erfian Junianto</p>  
47:    </footer>  
48:     </div><!--/.fluid-container-->  


52:  </html>  

50:     <script src="./js/bootstrap.min.js"></script>  


51:   </body>

Tampilannya akan menjadi seperti ini:

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>  


6:     <input type="text" class="span12" placeholder="Judul Berita" name="jdl_berita" required >  


5:    <div class="controls">  

7:    </div>  
8:   </div>  

9:   <div class="control-group">  


12:     <textarea rows="5" cols="40" class="span12" name="isi_berita" required></textarea>  


10:    <label class="control-label" for="inputIsiBerita">Isi Berita</label>  
11:    <div class="controls">  
13:    </div>  
14:   </div>  


18:     <input type="file" id="inputGambar" name="gbr_berita" required>  

15:   <div class="control-group">  
16:    <label class="control-label" for="inputGambar">Gambar Berita</label>  
17:    <div class="controls">  
19:    </div>  
20:   </div>  


24:     <button type="reset" class="btn btn-inverse">Cancel</button>  

21:   <div class="control-group">  
22:    <div class="controls">  
23:     <button type="submit" class="btn btn-primary">Post</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']);  


6:  #tangkap gambar  


5:  $tgl_berita = date('d M Y H:i');  


8:  if (!empty($_FILES["gbr_berita"]["tmp_name"]))  


7:  $namafolder="gambar/"; //folder tempat menyimpan file  

9:  {  


11:    if($jenis_gambar=="image/jpeg" || $jenis_gambar=="image/jpg" || $jenis_gambar=="image/gif" || $jenis_gambar=="image/png")  


10:    $jenis_gambar=$_FILES['gbr_berita']['type'];  
12:    {        


14:      if (move_uploaded_file($_FILES['gbr_berita']['tmp_name'], $gambar)) {  

13:      $gambar = $namafolder . basename($_FILES['gbr_berita']['name']);      


17:    <script language="javascript">  

15:        mysql_query("insert into tbl_berita values ('','$judul_berita','$isi_berita','$tgl_berita','$gambar')",$koneksi);   
16:     ?>  
18:            alert('Berhasil menambahkan');  


25:            alert('Gagal menambahkan');  

19:            document.location="index.php?link=lihatBerita.php";  
20:          </script>  
21:     <?php  
22:      } else {  
23:       ?>  
24:    <script language="javascript">  
26:            document.location="index.php?link=tambahBerita.php";  


35:        </script>  

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";  
36:     <?php  
37:    }  


41:  ?>  

38:  } else {  
39:    echo "Anda belum memilih gambar";  


40:  }

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">  


8:      <img data-src="holder.js/300x200" alt="300x200" src="<?=$hasil_data['gambar'];?>" style="width: 300px; height: 200px;">  


7:     <div class="span4">  
9:     </div>  

10:     <div class="span8">  

11:       <h2><?=$hasil_data['judul'];?></h2>  


14:        <a href="index.php?link=lihatDetailBerita.php&id=<?=$hasil_data['id_berita'];?>" class="btn btn-primary">Baca Selengkapnya</a>   


12:       <p style="text-align:justify;"><?=substr($hasil_data['isi'],0,500);?></p>  
13:       <p>  

15:        <a href="#" class="btn btn-inverse">Diposkan pada <?=$hasil_data['tanggal'];?></a>  


22:  ?>  


16:       </p>  

17:     </div>     
18:    </div>  

20:  <?php  
19:    <hr>  


21:  }

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">  


9:     <img class="img-polaroid" src="<?=$hasil_data['gambar'];?>" style="width:250px; height: 200px; float:left; margin-right:10px;"/>  


7:   <div class="row">  

8:    <div class="span12 well">  


11:     <p><a href="#" class="btn btn-inverse">Diposkan pada <?=$hasil_data['tanggal'];?></a> </p>  


10:     <div class="content-heading"><h3><?=$hasil_data['judul'];?></h3></div>  


15:   </div>  


12:     <p style="text-align:justify;"><?=$hasil_data['isi'];?></p>  
13:     <div style="clear:both;"></div>  
14:    </div>  


16:  </div>

Akan menghasilkan tampilan sebagai berikut

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">  


8:      <li><a href="index.php?link=tambahBerita.php">→ Tambah Berita</a></li>  


7:      <li class="nav-header">Menu</li>  

9:      <li><a href="index.php?link=lihatBerita.php">→ Lihat Berita</a></li>  


13:    while($hasil_recent= mysql_fetch_array($ambil_recent)){  


10:      <li class="nav-header">Baca Juga</li>  
11:      <ul type="square">  
12:       <?php  


17:      </ul>  

14:        echo "<li><a href='index.php?link=lihatDetailBerita.php&id=$hasil_recent[id_berita]'>".$hasil_recent['judul']."</a></li>";  
15:    }  
16:    ?>  
18:    </ul>  


19:  </div><!--/.well ko-->

Akan menghasilkan tampilan sebagai berikut:

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

selamat mencoba dan semoga bermanfaat!!!

Comments

IL_R MeAugust 17, 2016 at 11:11 AM
gan kok setelah ane klick baca slngkpx post ke 2 malah masuk ke post 1, bgtu jg slnjtx mskx ke postingan ke 1 smw
UnknownDecember 26, 2018 at 11:40 AM
This comment has been removed by the author.
EsiapokerSeptember 7, 2019 at 6:06 AM
ESIAPOKER ♠ AGEN POKER DOMINO BANDARQ SAKONG TERPERCAYA DAN TERAMAN DI ASIA ♠

Hanya Dengan 1 User ID Sudah Bisa Memainkan 8 Permainan Lho...

Tersedia Permainan :
► POKER
► BANDAR POKER
► DOMINO99
► BANDARQ
► ADUQ
► CAPSA SUSUN
► SAKONG (NEW)
► BANDAR66 (HOT NEW'S)

Minimal Deposit & Withdraw Hanya Rp.15.000,- Dan Juga Bekerja Sama Dengan 6 Bank Lokal Ternama !!!
♣ BCA
♣ MANDIRI
♣ BNI
♣ BRI
♣ CIMB
♣ DANAMON

Dan Juga Menerima Deposit Via "OVO" Dan "GO-PAY" Serta Deposit Via Pulsa "Telkomsel (RATE 80%)" Dan "XL (RATE 90%)"

Bonus Dan Pelayanan :
♦ Bonus TurnOver / Cashback 0.5% Setiap Hari Rabu dan Sabtu, Atau Bisa Juga Di Claim Setiap Hari nya !!!
♦ Bonus Referral 15% SEUMUR HIDUP !!!
♦ Jackpot Ratusan Juta Rupiah Setiap Harinya !!!
♦ Pelayanan CS Ramah 24jam
♦ Bank Online 24jam Setiap Hari !!!
♦ 100% NO BOT

Untuk Info Lebih Lanjut Mengenai "ESIAPOKER" Bisa Langsung Menghubungi Kontak Dibawah Ini :
♥ Livechat : Klik Disini
♥ Whatsapp : +855•98•498•075
♥ Line : esiapoker.com

Link Alternatif Resmi ESIAPOKER : esiapoker88.id | 178.79.177.190 (Tanpa Menggunakan www, Langsung Copy Lalu ENTER)

Anda Menang, Kamipun Senang
Salam Jackpot "ESIAPOKER" ♠♥♣♦
angkorpuroSeptember 20, 2019 at 2:59 AM

Ijin promo yah gan...Mari Bergabung Dengan Website itudewa Situs judi online yang memberikan BONUS DEPOSIT NEW MEMBER 10% Untuk Semua

Member BARU SETIAP HARINYA. -MINIMAL Deposit Rp.25.000 dan Withdraw Rp.50.000

-Bonus Ajak Teman Kamu Bermain Refferensi S/D 100ribu
-Bonus referral sebesar 20% seumur hidup
-Bonus GEBYAR TURNOVER TERBANYAK
-Bonus Rollingan 0,3
-Bonus New Member 10%

Akses ke 7 Game Hanya dengan 1 ID
Tunggu apalagi ayo segera GABUNG di ITUDEWA
Register : https://bit.ly/2Pgs1Gk

HubungiKontak Kami :
Line : ituDewa
WhatsApp : +85511251182
WeChat : OfficialituDewa
23523September 21, 2019 at 2:59 PM
fafaslot
joker123
vivoslot
play1628

https://taruhanslot.net/bandar-slot-joker123-game-pelayanan-memuaskan/

BONUS 10% MEMBER BARU SLOT VIVOSLOT, JOKER123, PLAY1628
Judi Slot Bolavita Bisa Deposit Via OVO & GO-Pay.
Taruhan Slot Deposit Via Pulsa XL & TSEL 25rb.

INFO Pendaftaran Slot Online : http://159.89.197.59/register/
INFO Artikel Slot Online : https://taruhanslot.net

WITHDRAW BESAR
JACKPOT BESAR
SLOT GAMES!!
Buruan Daftar , Main dan Withdraw Bersama Agen Judi online BOLAVITA kembali.

Telegram : +62812-2222-995
Wechat : Bolavita
WA : +62812-2222-995
Line : cs_bolavita
AdminOctober 13, 2020 at 1:26 AM
terimakasih ya atas penjelasannya, sangat membantu
AdminOctober 13, 2020 at 5:01 AM
izin menggunakan ilustrasinya di : Contoh Web Portal Berita Sederhana
AnonymousJune 11, 2021 at 10:26 PM
I really appreciate your support on this.
Look forward to hearing from you soon.
I’m happy to answer your questions, if you have any.

คาสิโนออนไลน์

เครดิตฟรี

แจกเครดิตฟรี ฝากถอนง่าย
AnonymousJune 28, 2021 at 2:07 AM
Many thanks for your kind invitation. I’ll join you.
Would you like to play cards?
Come to the party with me, please.
See you soon...

คาสิโนออนไลน์

แจกเครดิตฟรี ฝากถอนง่าย

เล่นบาคาร่า

คาสิโนออนไลน์
RajabolakuJuly 29, 2021 at 2:18 AM
Rajabola merupakan agen judi slot live22 Indonesia yang siap memberikan anda pelayanan Daftar akun situs taruhan LIVE22, NOVA88, SBOBET, MAXBET, CASINO SBOBET, 88TANGKAS, ISIN4D, TOTOKL, POKER, WM CASINO, 918KISS, ION CASINO, S128, dan DREAM GAMING/ DABET, RAJABOLA ingin memberikan anda pengalaman terbaik dalam bermain judi online.

Live22 Slot
Daftar Live22 Slot
Login Live22 Slot
Login Live22 Slot Terbaru
Deposit Live22 Slot
Deposit Pulsa Live22 Casino
Withdraw Live22 Slot
Download APK Slot Live22
Live22 Slot Pulsa
Live22 Slot Indonesia
Sharly February 9, 2022 at 10:51 PM
You will, great friend, PEBBLE! https://www.bio898.com

Search This Blog

Andri borneo

Cara membuat portal berita sederhana dengan HTML, PHP, CSS (bootsrap), dan Javascript

Comments

Post a Comment

Popular posts from this blog

Cara merubah bahasa di situs web yang tidak memiliki translate bahasa

Cara Bermain Poker