MEMBUAT MASTER BERITA Teknik Informatika Sopingi, M.Kom

Ukuran: px

Mulai penontonan dengan halaman:

Download "MEMBUAT MASTER BERITA Teknik Informatika Sopingi, M.Kom"

Indra Setiawan
6 tahun lalu
Tontonan:

1 MEMBUAT MASTER BERITA Teknik Informatika Sopingi, M.Kom 1. Buatlah File index.php File ini digunakan untuk menampilkan form dan datagrid tabel berita Memanggil koneksi <h1>manage BERITA</h1> <table id="dg_berita" class="easyui-datagrid" style="width:100%;height:300px" url="berita/tampil.php" toolbar="#toolbar" pagination="true" rownumbers="true" fitcolumns="true" singleselect="true"> <thead> <tr> <th field="tgl_berita">tanggal</th> <th field="judul_berita">judul Berita</th> </tr> </thead> </table> Table berbentuk datagrd url : file JSON yang akan ditampilkan (JSON dibuat oleh tampil.php) toolbar : menu diatas datagrid, pagination : halaman, rownumbers : no.baris fitcolumns: kolom menyesuaikan isi konten, singleselect: hanya boleh memilih 1 baris tgl_berita : nama kolom di tabel berita judul_berita : nama kolom di tabel berita <div id="toolbar" style="padding: 5px;"> <a href="#" class="easyui-linkbutton" plain="false" onclick="tambah()">tambah</a> <a href="#" class="easyui-linkbutton" plain="false" onclick="ubah()">ubah</a> <a href="#" class="easyui-linkbutton" plain="false" onclick="hapus()">hapus</a> tambah, ubah, hapus : fungsi di javascript (di halaman bawah) Popup / jendela dialog <div id="dialog_berita" class="easyui-dialog" style="width:450px;height:400px;padding:10px" data-options="modal:true,closed:true" buttons="#tombol"> Id_berita, judul_berita, konten_berita :samakan dengan nama kolom file_gbr_berita: khusus input file tidak boleh sama dengan nama komlom gbr_berita <div style="padding:3px"> <form id="fm_berita" method="post" enctype="multipart/form-data" novalidate> <input type="hidden" name="id_berita" id="id_berita"/> <div class="fitem"> <label>judul Berita: </label> <input name="judul_berita" id="judul_berita" class="easyui-textbox" required="true" style="width:400px;"> <div class="fitem"> <label>judul Berita: </label> <input name="konten_berita" id="konten_berita" class="easyui-textbox" required="true" data-options="multiline:true" style="width:400px; height: 170px">

<div class="fitem"> <label>gambar : </label> <input name="file_gbr_berita" id="file_gbr_berita" class="easyui-filebox" required="true" style="width:300px; font-weight: bold;"> </form> <div

2 <div class="fitem"> <label>gambar : </label> <input name="file_gbr_berita" id="file_gbr_berita" class="easyui-filebox" required="true" style="width:300px; font-weight: bold;"> </form> <div id="tombol"> <a href="#" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="simpan()" style="width:90px">simpan</a> <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dialog_berita').dialog('close')" style="width:90px">batal</a>  <script type="text/javascript"> function proses(){ $.messager.progress({ title :'Proses', msg :'Loading...', text :'' ); function proses_tutup(){ $.messager.progress('close'); Dialog Animasi Loading Menutup Dialog Animasi Loading var url; var p; Form dikosongkan function tambah(){ $('#fm_berita').form('clear'); $('#dialog_berita').dialog('open').dialog('settitle','tambah berita'); url = 'berita/tambah.php'; Buka dialog_berita dan ubah judulnya

$function simpan(){ if ($('#fm_berita').form('validate')){ proses(); Proses validasi FORM sudah diisi atau belum $('#fm_berita').$ $form('validate');, ); Form disubmit/diposting Ketika sukses posting success: function (result){ proses_tutup(); var result = eval ('('+result+')'); if (result.$ form('clear'); $('#dialog_berita').dialog('close'); $('#dg_berita').

form('clear'); $('#dialog_berita').dialog('close'); $('#dg_berita').

$(tapi hasil = 1) maka form dikosongkan, Datagrid direload, Dan muncul Berhasil Simpan Data yang dipilih di datagrid (dg_berita) function ubah(){ var row = $('#dg_berita').$

3 function simpan(){ if ($('#fm_berita').form('validate')){ proses(); Proses validasi FORM sudah diisi atau belum $('#fm_berita').form('submit', { url: url, onsubmit: function(){ return $(this).form('validate');, ); Form disubmit/diposting Ketika sukses posting success: function (result){ proses_tutup(); var result = eval ('('+result+')'); if (result.hasil=="0"){ title:'kesalahan', msg: 'Gagal Simpan' ); else if (result.hasil=="-1"){ title:'kesalahan', msg: 'Format Gambar : JPG, PNG atau GIF' ); else { $('#fm_berita').form('clear'); $('#dialog_berita').dialog('close'); $('#dg_berita').datagrid('reload'); title:'informasi', msg: 'Berhasil Simpan' ); Jika hasil 0 maka muncul Gagal Simpan Jika hasil -1 maka muncul Format gambar salah Jika hasil bukan 0 atau -1 (tapi hasil = 1) maka form dikosongkan, Datagrid direload, Dan muncul Berhasil Simpan Data yang dipilih di datagrid (dg_berita) function ubah(){ var row = $('#dg_berita').datagrid('getselected'); if (row){ $('#dialog_berita').dialog('open'); $('#dialog_berita').dialog('settitle','ubah berita'); $('#fm_berita').form('load',row); url = 'berita/ubah.php'; else { ); title:'info', msg: 'Tidak ada data yang dipilih' Jika ada baris yang dipilih maka - Buka dialog (dialog_berita) - Ubah judulnya menjadi Ubah Berita - Tampian data di baris yang dipilih di FORM - Ubah variable URL= berita/ubah.php Jika TIDAK ada baris yang dipilih maka: Muncul Tidak ada data yg dipilih

4 function hapus(){ var row = $('#dg_berita').datagrid('getselected'); </script> if (row){ $.messager.confirm("confirm","yakin hapus data ini :<br>"+row.judul_berita+"?",function(r){ ); if (r){ proses(); post('berita/hapus.php',{id_berita:row.id_berita,function(result){ proses_tutup(); if (result.success){ $('#fm_berita').form('clear'); $('#dg_berita').datagrid('reload'); else { $.messager.show({ title: 'Kesalahan',,'json'); msg: 'Gagal Hapus' ); Data yang dipilih di datagrid (dg_berita) Jika ada data yg dipilih, maka muncul konfirmasi Jika GAGAL posting maka: Muncul Gagal Hapus Post ke berita/hapus.php dengan membawa parameter: nilai id_berita dibaris yang dipilih Jika sukses posting maka: Form dikosongkan dan datagrid direload  <style type="text/css"> #fm{ margin:0;.ftitle{ font-size:14px; font-weight: bold; margin-bottom:10px; border-bottom:1px solid #ccc;.fitem{ margin-bottom: 10px;.fitem label{ font-weight: bold; display: block; width:200px; text-align: left; vertical-align: top; </style>

2. Buatlah File tampil.php Digunakan untuk membuat data JSON dari tabel berita. Data JSON akan ditampilan di datagrid (file index.php) Panggil koneksi $hal = isset($_post['page'])?

5 2. Buatlah File tampil.php Digunakan untuk membuat data JSON dari tabel berita. Data JSON akan ditampilan di datagrid (file index.php) Panggil koneksi $hal = isset($_post['page'])? intval($_post['page']) : 1; $juml_baris = isset($_post['rows'])? intval($_post['rows']) : 10; $batas = ($hal-1)*$juml_baris; $hasil = array(); $rs = mysql_query("select count(*) from berita "); $baris = mysql_fetch_row($rs); Berita = nama tabel Id_berita = primary key $hasil["total"] = $baris[0]; $rs = mysql_query("select * from berita order by id_berita desc limit $batas,$juml_baris"); $data = array(); while($row = mysql_fetch_object($rs)){ array_push($data, $row); $hasil["rows"] = $data; echo json_encode($hasil); 3. Buatlah file tambah.php Digunakan untuk menyimpan data berita dari posting form file index.php $tgl_berita $judul_berita $konten_berita Panggil koneksi = date("y-m-d H:i:s"); = addcslashes($_request['judul_berita'],"'"); = addcslashes($_request['konten_berita'],"'"); $rand=date('ymdhis'); $filename = $rand."_".$_files["file_gbr_berita"]["name"]; $filetypes = array('png','jpg','gif','png','jpg','gif'); $fileparts = pathinfo($filename); date("y-m-d H:i:s") : tanggal dan jam sekarang judul_berita dan konten_berita nama dari input FORM file_gbr_berita : nama dari input file FORM pathinfo($filename): lokasi file gambar di komputer

6 if (in_array($fileparts['extension'],$filetypes)) { Jika file gambar PNG, JPG atau GIF maka diproses UPLOAD $filename=str_replace("'","",$filename); move_uploaded_file($_files["file_gbr_berita"]["tmp_name"],"../../images/".$filename); $sql = "insert into berita values (NULL,'$judul_berita','$tgl_berita','$konten_berita','$filename')"; $result echo json_encode(array('hasil'=>'1')); else { echo json_encode(array('hasil'=>'0')); else { echo json_encode(array('hasil'=>'-1')); 4. Buatlah file ubah.php Digunakan untuk merubah data berita yang dipilih kemudian di posting dari file index.php $tgl_berita $id_berita $judul_berita $konten_berita = date("y-m-d H:i:s"); = addcslashes($_request['id_berita'],"'"); = addcslashes($_request['judul_berita'],"'"); = addcslashes($_request['konten_berita'],"'"); $rand=date('ymdhis'); $filename = $rand."_".$_files["file_gbr_berita"]["name"]; $filetypes = array('png','jpg','gif','png','jpg','gif'); $fileparts = pathinfo($filename); if ($filename!="") { Jika ada file gambar maka gambar diupload Dan kolom gbr_berita diupdate if (in_array($fileparts['extension'],$filetypes)) { $filename=str_replace("'","",$filename); move_uploaded_file($_files["file_gbr_berita"]["tmp_name"],"../../images/".$filename); $sql = "update berita set tgl_berita='$tgl_berita', judul_berita='$judul_berita', konten_berita='$konten_berita',gbr_berita='$filename' where id_berita='$id_berita'";

7 $result echo json_encode(array('hasil'=>'1')); else { echo json_encode(array('hasil'=>'0')); else { echo json_encode(array('hasil'=>'-1')); Jika TIDAK ADA file gambar maka tidak ada proses UPLOAD gambar else { $sql = "update berita set tgl_berita='$tgl_berita', judul_berita='$judul_berita', konten_berita='$konten_berita' where id_berita='$id_berita'"; $result echo json_encode(array('hasil'=>'1')); else { echo json_encode(array('hasil'=>'0')); 5. Buatlah file hapus.php Digunakan untuk menghapus data berita yang dipilih dari datagrid file index.php Id_berita : primary key tabel berita $id_berita = htmlspecialchars($_request['id_berita']); $sql = "delete from berita where id_berita='$id_berita'"; $result echo json_encode(array('success'=>true)); else { echo json_encode(array('errormsg'=>false)); 6. Edit admin/index.php <div title="master"> <ul class="easyui-datalist"style="width: 100%;"> <li><a href="#" onclick="buka('profil')">profil</a></li> <li><a href="#" onclick="buka('berita')">berita</a></li> <li>gallery</li> <li>download</li> </ul> Tambahkan tag <a> dan Onclick

dokumen-dokumen yang mirip

MODUL 8 Insert, Update, & delete

MODUL 8 Insert, Update, & delete Pemograman Web Teknik Informatika Universitas Pasundan Bandung 2016/2017 Konten Mengubah Data dari Array menjadi Database... Error! Bookmark not defined. Mengkoneksikan