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

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 


Blog, Updated at: 03:28

132 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
    27. saya juga gan... zettozero24@gmail.com

      Delete
    28. blh donk gan di rezgr0@gmail.com

      Delete
    29. gan minta juga dong suryo.s428@gmail.com
      ditunggu gan

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

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

      Delete
    32. kalo berkenan,, minta dong bang__
      ibenkwsbenyws19@gmail.com

      Delete
    33. Gan ane juga mau donk, kirim ke ahmadfauzan314@gmail.com ditunggu gan

      Delete
    34. gan mending simpen scriptnya di mediafire, terus copy linknya ke adfly, nah suruh pada download deh hehehe saran ane. .:v

      Delete
    35. Saya juga mau gan send ke aras.opraza@gmail.com

      Delete
    36. gan saya mau dong
      email wikalz888@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. Gan apakah untuk ukuran gambar yang diatas 3-5mb bisa dimasukin database?

      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
    3. Pak, boleh dibagi gak? kalau boleh saya minta tolong di email ke jefri.sardo@gmail.com

      Terimakasih Pak, salam

      Delete
    4. Sangat bermanfaat terimakasih gan dan setelah saya mencari2 memang hanya artikel ini yg cukup lengkap dan jelas.

      Ingin bertanya pertanyaan sama seperti di atas, bagaimana ya cara untuk memasukkan gambar di tengah artikel dan ingin menambahkan subbab yg di bold, dan berhubungan dengan font dll, kira2 caranya bagaimana ya? Karena selama seminggu saya mencoba ternyata sulit juga.. Mohon bantuannya gan

      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. Kok gambarnya gak muncul yah bro?

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

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

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

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

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

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

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

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

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

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

    terima kasih sudah membantu saya yg gi belajar.

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

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

    ReplyDelete
  43. Saya jg minta mas, kebetulan saya baru belajar konding anandadiza12@gmail.com

    ReplyDelete
  44. selamat malam gan, saya minta tlg kirim kan scriptnya gan mau belajar jg, trims bantuan nya. dharmakambuna1984@gmail.com

    ReplyDelete
  45. gan punya script pendaftaran mahasiswa ga?? tlg kirim ke endrezeppelin@gmail.com

    ReplyDelete
  46. gan boleh mnta script nya dari awal sampai akhir
    ke email ini aja gan ardi.rtc001@gmail.com

    ReplyDelete
  47. Ka minta source code lengkapnya, terima kasih.
    nda998@gmail.com

    ReplyDelete
  48. gan minta tolong rubahkan ke mysqli dong scriptnya

    wildaafn@gmail.com

    ReplyDelete
  49. gan, caranya biar artikelnya ada kategorinya gimana?

    ReplyDelete
  50. minta scriptnya donk gan iqbalokthapian18@gmail.com

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

    ReplyDelete
  52. Makasih sanak, sangat bermanfaat,akhirnya jd bisa ngumpul tugas buat UAS nih.

    ReplyDelete
  53. Mau juga gan...kirim ke irwandirizkiputra2@gmail.com

    ReplyDelete
  54. Mau dong gan.. kirim ke bowez88@gmail.com
    Terima kasih

    ReplyDelete
  55. Mau dong gan.. kirim ke bowez88@gmail.com
    Terima kasih

    ReplyDelete
  56. Tq mas ini yang saya cari ..... sekali lagi makasih mas ... izin nyontek ...

    ReplyDelete
  57. saya juga boleh mas
    amin.syaiful14@gmail.com

    ReplyDelete
  58. gan, saya juga minta.
    lagi buat tugas kuliah.
    sfrejon@gmail.com
    trima kasih gan.

    ReplyDelete
  59. Masih Aktif ngk ini admin nya ?

    ReplyDelete
  60. minta kak ..
    lidyakristantikatipana18xrpl2@gmail.com
    WAnya udah gak bisa

    ReplyDelete
  61. salam Kenal Gan, terimakasih untuk Infonya. kalau boleh minta tolong kirim scriptnya dong ke jefri.sardo@gmail.com
    Masih pemula Pak

    ReplyDelete
  62. mantap kak. minta script nya kak dari 0 sampai bisa banget soalnya masih pemula. Email kak : iqbaldeville@gmail.com

    ReplyDelete
  63. Mau dong
    ariegiayudha@gmail.com

    ReplyDelete
  64. Mau dong
    ariegiayudha@gmail.com

    ReplyDelete
  65. gan boleh minta kirim 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,say masi bingung dalam pembuatan web.kalo berkenan kirimin ke ahmadnuch27@gmail.com

    ReplyDelete
  66. Bisa dibagi jga boss ke ane ari.siswanto.ar@gmail.com
    Terima kasih banyak sblumny

    ReplyDelete
  67. gan ada script full systemnya dari awal (login & logout) sampai sini? kalo ada saya minta gan
    email :cleanmoney35@gmail.com

    ReplyDelete
  68. gan, sory nih ane error disini kenapa iya $id = $_GET['p'];

    Notice: Undefined index: p in D:\websoftware\Program Instalan\XAMPP\htdocs\artikel\single.php on line 3

    thanks

    ReplyDelete
  69. bagi gan ke zeinal26@gmail.com

    ReplyDelete
  70. terimakasih gan infonya, Bagus sangat membantu buat




    ReplyDelete
  71. boleh minta fullnya gan?

    iqbalmoch15@gmail.com

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

    ReplyDelete
  73. Halo Semuanya, maaf menggangu waktunya sebentar disini saya mau memberitahukan bahwa di situs kami sedang ada promo.

    Promonya sebagai berikut yaitu :

    * bonus deposit untuk member baru sebesar 30%
    * bonus deposit selanjutnya 10%
    * bonus turn over 0,5% akan di bagikan seminggu sekali
    * bonus referral sebesar 10%

    semakin banyak orang yang kita ajak maka semakin banyak juga bonus referral yang kita dapatkan. mana tau anda berminat bisa langsung daftar disini http://www.lagapoker.net/ref.php?ref=D3V1

    ReplyDelete
  74. Thanks Infonya, admin.

    Untuk mencari referensi website pertanian, peternakan dan perikanan saya sarankan untuk mengunjungi website ini ya min.Soalnnya sangat lengkap dan mudah dipahami.


    Ciri-Ciri Porifera

    Ciri-Ciri Kambing Jawarandu

    ReplyDelete

Search This Blog

Follow This Blog

Total Pageviews