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

Posted by TEKNIK INFORMATIKA on Tuesday, 24 November 2015

cara membuat daftar artikel dengan php
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 inputketikkan 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..

download scriptnya di sini aja gan

DOWNLOAD

klo mau scriptnya komen aja gan, nanti di email aja ya :D

#SelamatMencoba 

Blog, Updated at: 03:28

80 komentar:

  1. gan, salam kenal ya, maaf ni agak merepotkan. bisa minta bantu kirimkan script untuk membuat web PHP dari awal sampai akhir ? dari awal pembuatan sampai kita bisa posting artikel kedalam website yg kita buat sendiri ? tolong dibantu ya gan, ini rencananya mau tak buat latihan. kalau berkenan kirim ke email ini ya. dedy.purnama@outlook.com

    ReplyDelete
    Replies
    1. aku juga mau dong....
      iswantomahmud2@gmail.com

      Delete
    2. sent gan, coba di kembangin lagi aja gan..

      Delete
    3. aku juga mau dong miaisnaeni@gmail.com

      Delete
    4. This comment has been removed by the author.

      Delete
    5. maaf gan, mau juga dong buat penulisan nih.. send ke dewipuji.dph@gmail.com

      Delete
    6. gan tolong boleh kirimin juga gak ke email ? adamharde@gmail.com

      Delete
    7. gan minta jga ya.. minta tolong kirim email ke andri034@gmail.com

      Delete
    8. Wah, mau juga gan. Yang udah dapat kiriman email kalau berkenan fowardin dunk. Biar Bang Banu tidak banyak direpotkan. Moga ilmunya barokah Gan. Agan2 lain yang sudah dapat, kalau tidak repot minta kirim juga ke heri.katalis@gmail.com ya... Semangat belajar Gan. Tenkyu...

      Delete
    9. gan saya juga minta dong, tolong dikirim ke rendytogas23@gmail.com, thank's seblumnya

      Delete
    10. Saya Juga Mau DOng Gan
      Email : valentinoandressirpl10@gmail.com

      Delete
    11. mau juga dong gan
      email Baalrauly@gmail.com

      Delete
    12. kirim juga ya ke email : riswandimalewa@gmail.com

      Thanks

      Delete
    13. saya juga gan
      adehendrawan99@gmail.com
      terima kasih

      Delete
    14. sajuga minta gan :)
      sidiqmuhamad99@gmail.com
      terimakasih

      Delete
    15. ane juga gan mulky.nugraha@gmail.com

      Delete
    16. gan, bisa di kirim ke emailnya ane? Insha Allah ane kembangkan untuk nanti ane ajarkan ke siswa siswi di sekolah ane gan supaya bermanfaat. ini emailnya gan. boys.summer17@gmail.com

      Delete
    17. saya gan minta mau bljr juga :)
      robbypratama0705@gmail.com

      Delete
    18. saya juga gan, mohon bantuannya gan. tommysaputra59@gmail.com

      Delete
    19. saya juga gan, saya lagi belajar gan, mohon bantuannya. ilham011001@gmail.com

      Delete
    20. saya juga dong gan , tolong ya kirim ke armandgtrz@gmail.com , terimakasih sebelumnya

      Delete
    21. Maaf gan, saya juga mau gan,, boleh minta gan??

      Delete
    22. Ni e-mail saya gan.. syafiim48@gmail.com

      Delete
    23. bisa minta juga ngga, soalnya mau seminggu lagi mau presentase website ni. ini email saya aftari_ningrum@yahoo.com

      Delete
    24. klaw bisa website yang berhubungan sama kesehatan dan kecantikan wanita yaah.. makasih sebelumnya..

      Delete
    25. ane juga gan,forward aja yg udah punya di novianoke@gmail.com

      Delete
    26. saya mau gan, kirim ke imamhasan.email@gmail.com

      Delete
  2. kenapa setiap masukin image, imagenya selalu ga muncul ya?

    ReplyDelete
    Replies
    1. ga muncul di daftar artikel gan?? , coba download di sini aja gan, sorry baru online lg gan

      https://drive.google.com/file/d/0B6DiP6cU78b_WFBFX2RGd29ZaVk/view

      Delete
    2. ya gan.. ini kenapa kok masukin ukuran gambar yang besar kok gak tampil gambarnya malah kosong

      Delete
  3. pas coba tutorialnya bisa, tapi pas coba buat codingan sendiri kok gak bisa ya? padahal syntaxnya udah sama
    gak mau ke save ke database

    ReplyDelete
  4. @mukhlis : perintah insert into nya sudah benar gan? trus cek name input nya sudah sama dngan variabel $_POST nya blum gan?

    ReplyDelete
  5. gan apakah cuman sampai disini tutorialnya?? apakah nggak ad episode lanjutan...hahaa....pengen di lanjutin

    ReplyDelete
    Replies
    1. request aja gan :v, nanti ane coba bikin klo sempet haha..

      Delete
    2. buat kategorinya gimana gan?

      Delete
    3. request kategori

      Delete
  6. Terimakasih gan tutorialnya sangat membantu, banyak orang yang posting tentang artikel seperti ini tapi tidak disertai cara memasukkan gambarnya.
    Maaf gan mau nanya, kalau gambarnya pengin dimasukan tapi sesuai keinginan kita taruh ditengah artikel atau di akhir artikel gimana caranya. terus biar bisa diatur misal BAB, sub BAB, nomor sub BAB, dibikin bold sub BAB, dll. (yang kaitannya pengaturan font) gimana ya caranya?
    Thanks..

    ReplyDelete
    Replies
    1. sama-sama gan, ane ada back end yg pernah ane buat nh gan, udh ada editor nya pake tinymce, editor font nya jg sederhana gan.. ane email aja ya gan.. tp kalo input gambar di textarea ky cms blogger dll hrus pake link gan..

      Delete
    2. Iya oke gan, ditunggu ya kirimannya,..

      Delete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. gan tolong kirimkan script untuk membuat web lengkap ? saya ingin belajar membuat dari 0 - final gan pliss
    email : singleattacker1@gmail.com

    ReplyDelete
  10. kak minta scriptnya dari awal sampai akhir juga dong.. mau saya pelajari terus di kebangin buat bikin tugas..

    email : shofi.0607@gmail.com

    ReplyDelete
  11. Terimakasih gan, infonya. Ini yang saya cari, semoga berkah dan ilmunya terus bertambah dan bermanfaat... (shadiqin@gmail.com)

    ReplyDelete
  12. makasih banyak ka, buat infonya. kalau kaka berkenan boleh minta scriptnya dari awal sampai akhir ka? buat latihan.. terimaksih banyak sekali lagi

    email :igstayu.aldyth@gmail.com

    ReplyDelete
  13. punya saya ada masalah disini gmana yah min,, tolong bantuannya
    Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\Belajar\artikel1\artikel\artikel.php on line 6
    Tidak Ada Artikel

    ReplyDelete
  14. gan boleh minta script dari awal sampai akhir gak ? buat tugas kuliah gan, tolong ke email adamharde@gmail.com
    Thank's

    ReplyDelete
  15. Thanks gan, semoga dimudahka rezekinya :D

    ReplyDelete
  16. gan, mau dong kalo di tambah edit sm deletenya, scriptnya gmn ya? makasih gan

    ReplyDelete
  17. blh minta tutorial gan??
    andrelumentut04@gmail.com

    ReplyDelete
  18. gan boleh minta ? :p
    lumayan buat latihan , maklum newbie gan :p
    abubakarsidiq.informatika@gmail.com

    ReplyDelete
  19. boleh minta juga gan, untuk referensi :p
    okiwiranata@gmail.com

    ReplyDelete
  20. trimakasih gan...sangat bermanfaat buat belajar,,
    kalau boleh kirimi pembuatan galeri foto berikut penjelasanya (masih sedikit kurang faham)

    ReplyDelete
  21. trimakasih gan...sangat bermanfaat buat belajar,,
    kalau boleh kirimi pembuatan galeri foto berikut penjelasanya (masih sedikit kurang faham)riddwunn@yahoo.com

    ReplyDelete
  22. hasilnya blank om kalo buka di formartikel.php

    ReplyDelete
  23. gan saya pengen buat website berita , kira kira apa aja yang di butuhin gan , email saya gan vahadkhusaini@gmail.com

    ReplyDelete
  24. ane minta skripnya gan
    syandi10@gmail.com

    ReplyDelete
  25. Boleh tuh Gan script nya buat web dr nol sd jadi...trims ya

    ReplyDelete
  26. Aku minta script lengkapnya dong ka. Ini email ku ana09.sa@gmail.com

    ReplyDelete
  27. send juga donk gan ke mrrizky999@gmail.com

    ReplyDelete
  28. $id = $_GET['p'];
    di file single.php
    itu buat apa?

    ReplyDelete
  29. minta script lengkapnya dong gan
    ini email saya dhika.cakra01@gmail.com

    ReplyDelete
  30. Oh sudah bisa bro, makasih bro postingannya sangat bermanfaat

    ReplyDelete
  31. maaf, mohon bantuannya juga gan. ke email : harywibowo04@gmail.com
    makasih sebelumnya semoga bermanfaat

    ReplyDelete
  32. Maaf gan, minta pertolongan nya buat di email juga ke email: flowridwan@gmail.com, Makasih gan sebelumnya semoga bermaanfaat

    ReplyDelete
  33. sangat membantu. oiya, tolong coding hapus dan edit untuk artikel ini dong ka, terima kasih:)

    ReplyDelete
  34. maaf gan boleh minta file lengkapnya? buat belajar makasih
    kirim email ke : hazmybagas1604@gmail.com

    ReplyDelete
  35. gan, ane juga minta file lengkap nya. maksih gan
    email: ariframdan99@gmail.com

    ReplyDelete
  36. saya juga boleh minta gan buat belajar gan
    email : rizal.hanz147@gmail.com

    ReplyDelete
  37. Gan bagi source code lengkapnya buat tak edit lg kirim ke sini gan andimubaroqq@gmail.com

    ReplyDelete
  38. This comment has been removed by the author.

    ReplyDelete
  39. Bos, minta source kode nya dan mohon di kirim ke teguh280882@gmail.com.

    terima kasih sudah membantu saya yg gi belajar.

    ReplyDelete
  40. Saya juga mau codingnya gan , buat belajar tolong dikirim ridhoaldiko92@gmail.com

    ReplyDelete
  41. Ane juga minta dong gan, mau di kembangin lagi buat ujikom nanti gan :'v 05fdlyrzkyrmdn12@gmail.com

    ReplyDelete

Search This Blog

Follow This Blog

Total Pageviews