--> Skip to main content
Home Pemrograman Web Web Programming Tutorial PHP : Membuat Artikel Berita

Tutorial PHP : Membuat Artikel Berita

Tutorial PHP edisi ini, kita akan membuat sebuah aplikasi artikel berita. Contoh sederhana bagaimana menghubungkan antara dua file, file pertama merupakan suatu interface bagi si admin untuk menginput artikel berita yang telah dilengkapi dengan librari TinyMCE. Sedangkan interface pada file kedua menampilkan artikel yang telah diinputkan. Kedua file tersebut masing-masing ditunjukkan oleh gambar berikut :
Gambar.1 Input Berita

 Seperti yang ditampilkan oleh Gambar.1, kita menginput berita beserta gambar, sehingga begitu diklik Submit, maka file satu lagi akan menampilkan hasil inputan seperti yang ditunjukkan oleh Gambar.2 :
Gambar.2 Tampilan Berita
Dalam percobaan ini, tidak dilakukan proses login untuk admin, dan update berita untuk banyak artikel. Namun demikian, dari contoh tersebut kita dapat mengembangkannya sesuai kebutuhan kita. Aplikasi ini terdiri dua file PHP (editor.php & berita.php) serta dua file CSS (style.css & style2.css).

 Persiapan untuk membangun aplikasi artikel berita, terlebih dahulu silahkan anda baca tutorial WYSIWYG Web editor : TinyMCE. Kita menggunakan file style.css dan test.html pada WYSIWYG Web editor : TinyMCE . Ubahlah file test.html menjadi editor.php, kemudian modifikasi file editor.php sehingga menjadi :

<html>
<head>
<title>Contoh TinyMCE</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter 
alignright alignjustify | bullist numlist outdent indent | link image",
    /*toolbar1: "insertfile undo redo | styleselect  ", 
    toolbar1: "bold italic | alignleft aligncenter alignright alignjustify",
    toolbar2: "bullist numlist outdent indent | link image",*/
    toolbar2: "print preview media | forecolor backcolor emoticons", 
    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});
</script>
</head>
<body>
<div id="wrapper"><!-- Membuat Kotak 1-->
    <div id="header">
    <h1 align="center">Contoh Implementasi Seperti Microsoft Word
    <br>Dengan Plugin TinyMCE
    </h1>   
    </div>          
    <div id="wrapper_konten">
        <div id="left_konten">          
        </div>
        <div id="right_konten">  
            <form name="visi" method="post" action="berita.php">
                <textarea name="content" style="height:151px">
                </textarea>
                <input type="submit" width="120" height="24" name="phpvar" value="Submit" >
            </form              
        </div>
     </div>
</div>
</body>
</html>

 Untuk file style.css , tidak perlu dilakukan modifikasi. Kemudian, kita membuat file yang diberi nama style2.css yang berisi script seperti berikut :

 
root { 
    display: block;
}
h1 {
    color: #064A7A;
    font-size: 34px;
    font-weight: bold;
    margin:28px 0 8px;
    padding: 0;
}
/*Membuat bentuk dari kotak1 samapai kotak 7*/
#wrapper{
    width:1000px;/*Lebar kotak*/
    height:680px;/*Tinggi kotak*/
    border:1px solid #cdcdcd; /*Border kotak*/
    background:#f0f3f6;/*Background/warna kotak*/
    margin:auto;/*Supaya kotak berada di tengah*/
}
#header{
    width:960px;
    height:150px;
    border:1px solid #cdcdcd;
    background:#639fce;
    margin:auto;
    margin-top:5px;/*jarak kotak dengan kotak diatasnya di beri 5px*/
}

#wrapper_konten{
    width:960px;
    height:500px;
    border:1px solid #cdcdcd;
    background:#639fce;
    margin:auto;
    margin-top:5px;
}

#right_konten{
    width:940px;
    height:485px;
    border:1px solid #cdcdcd;
    background:#e6e2e2;
    float:left;
    margin-left:5px;
    margin-top:5px;
    margin-right:5px; 
}

#atur{
    margin-left:15px;
    margin-right:15px; 
}

 Kemudian, buatlah file yang diberi nama berita.php yang bertujuan untuk menampilkan hasil inputan berita, file berita.php berisikan kode seperti dibawah ini :

 
<html>
<head>
<title>UPDATE BERITA</title>
<link type="text/css" rel="stylesheet" href="style2.css"/>
</head>
<body>
<div id="wrapper">
    <div id="header">
    <h1 align="center">Update Berita
    </h1>   
    </div>          
    <div id="wrapper_konten">
        
        <div id="right_konten">  
        <?php
         $temp=$_POST['content'];
         echo "<div id=atur>".$temp."</div>";
        ?>              
        </div>
        <div id="right_konten_bottom">              
        </div>
    </div>
</div>
</body>
</html>

 Untuk mempercepat percobaan anda, keseluruhan file dapat di download DISINI.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar