Cara Membuat Web Dinamis Sederhana (Input, Menampilkan Artikel dan Membuat Read More) Bagian 5

daftar artikel

Sebelumnya kita sudah membuat gallery photo. Kali ini saya akan memberikan tutorial sedikit, bagaimana cara input,menampilkan artikel dan read more.. 

1.  Pertama-tama seperti biasa Buka XAMPP lalu aktifkan Apache dan Mysql, lalu ketikkan di URL Browser : localhost/phpmyadmin maka muncul laman phpmyadmin, jika anda mengikuti tutorial sebelumnya buka database dengan nama db_web, jika belum ada anda bisa membuat databasenya pada form create new database, 

Jika database sudah di buat buka tab SQL, lalu ketikkan kode di bawah ini:

create table artikel
(
id_artikel int not null primary key auto_increment,
judul_artikel varchar(100),
isi_artikel text,
penulis_artikel varchar(250),
photo_artikel varchar(250),
tgl_artikel timestamp
)

2. Buat folder bernama "artikel" di dalam htdocs, lalu buat file "koneksi.php" di dalam folder artikel, berikut kodenya :

<?php  

$server= "localhost";  

$username = "root";   

$password = "";   

$database = "db_web";  

  

mysql_connect($server,$username,$password) or die ("Koneksi Gagal");  

mysql_select_db($database) or die ("Database Tidak Bisa Di Buka " );  

  

?>

3. Selanjutnya kita akan membuat form input artikel, ketikkan kode di bawah ini dan Simpan di folder htdocs/artikel dengan nama formartikel.php: 

<form id="formberita" method="post" action="saveartikel.php" enctype="multipart/form-data">

<center><p>

<label>Judul Artikel:</label><br>

<input type="text" id="judul_artikel" name="judul_artikel" required>

</p>

<p>

<label>Isi Artikel:</label><br>

<textarea style="width:600px; height:450px" id="isi_artikel" name="isi_artikel" required></textarea>

</p>

<p>

<label>Penulis Artikel:</label><br>

<input type="text" id="penulis_artikel" name="penulis_artikel" required>

</p>

<p>

<label>Photo Artikel:</label><br>

<input type="file" id="images" name="images"/>

</p>

<td colspan=2><input type="submit" id="submit" value="Kirim"></td>

</form>

Jika tombol kirim di klik maka action akan langsung memproses file saveartikel.php (warna kuning) dan data yang di form akan di baca melalui name input nya (warna  hijau).

 3. Untuk menyimpan data form input diatas, selanjutnya kita akan membuat kode untuk menyimpan data form kedalam mysql, ketikkan kode di bawah ini dan Simpan di folder htdocs/artikel dengan nama saveartikel.php:

<?php ob_start();

include "koneksi.php";

if($_POST){

$judulartikel      = $_POST['judul_artikel'];

$isiartikel    = $_POST['isi_artikel'];

$penulisartikel = $_POST['penulis_artikel'];

$photoartikel = $_FILES['images']['name'];

if(!empty($_FILES['images']['tmp_name'])){

move_uploaded_file($_FILES['images']['tmp_name'],'photo-artikel/'.$_FILES['images']['name']);

mysql_query("insert into artikel(judul_artikel, isi_artikel, penulis_artikel, photo_artikel)

values('$judulartikel', '$isiartikel', '$penulisartikel', '$photoartikel')"); 

} else {

mysql_query("insert into artikel(judul_artikel, isi_artikel, penulis_artikel)

values('$judulartikel', '$isiartikel' ,'$penulisartikel')");

}

header('location:artikel.php');

exit;

}

?>

jangan lupa buat folder bernama photo-artikel karena file photo yang kita input akan di masukan ke dalam folder photo-artikel (orange).

4. Setelah data berhasil kita input, lalu kita akan menampilkan artikel yang telah kita input, ketikkan kode di bawah ini dan Simpan di folder htdocs/artikel dengan nama artikel.php:

<center><h2>Index Artikel</h2></center>

<?php

include "koneksi.php";

$has = mysql_query("select * from artikel order by tgl_artikel desc");

$num = mysql_num_rows($has);

if($num<1){

echo'<center>Tidak Ada Artikel</center>';

}else{

while($data=mysql_fetch_array($has)){

$art = substr($data['isi_artikel'],0,100);

echo '

<h2>'.$data['judul_artikel'].'</h2>

<img width="330" height="280" src="photo-artikel/'.$data['photo_artikel'].'">

<h4>Di publikasikan pada '.$data['tgl_artikel'].'</h4>

<h4>Oleh '.$data['penulis_artikel'].'</h4>

<p>'.$art.'..</p>

   <a href="single.php?p='.$data['id_artikel'].'">Read More</a>

<br><br>

';}

}

?>

isi Artikel yang di tampilkan tidak melebihi 100 karakter (biru), untuk menampilkan semua isi dari artikel klik read more dan akan muncul tampilan lengkap artikel.. dan ketika read more di klik akan menuju link single.php yang menampilkan artikel berdasarkan id artikel yang di pilih (kuning)

5. Berikut adalah script untuk menampilkan semua artikel ketika read more di klik, buat file bernama single.php  dan ketikkan kode di bawah ini :

<?php

include "koneksi.php";

$id = $_GET['p'];

$hasil = mysql_query("select * from artikel where id_artikel='$id'");

$data=mysql_fetch_array($hasil);

$file = 'artikel/'.$data['photo_artikel'].'';

 if ($file =="artikel/"){

echo '

<h3> '.$data['judul_artikel'].' </h3> 

<p>Posted by '.$data['penulis_artikel'].' <br>

Pada Tanggal '.$data['tgl_artikel'].'</p> 

<p>'.$data['isi_artikel'].'</p>

';}

 else {

 echo '

<img width="400" src="photo-artikel/'.$data['photo_artikel'].'" alt="" />

<h3>'.$data['judul_artikel'].'</h3>

<p>Posted by '.$data['penulis_artikel'].' <br> 

Pada Tanggal '.$data['tgl_artikel'].'</p> 

<p>'.$data['isi_artikel'].'</p>

 ';}

?> 

Terakhir jalankan program melalui URL browser anda, ketikkan localhost/artikel/formartikel.php silahkan coba di input gan script sudah di coba di saya insya Allah 100% berhasil gan, jika ada error silahkan tinggalkan komentar..

untuk download script lengkapnya dari part 1 sampai 5 silahkan klik link di bawah sini

DOWNLOAD 

Jika ingin konsultasi masalah pemograman php, javascript dll, boleh hubungi nomor : 088211832975