Membuat Website Sederhana Dengan PHP dan MYSQL

Thursday, November 14, 2013


Membuat Website Sederhana Dengan PHP dan MYSQL

Saat saya belajar di SMK N TEMBARAK
saya mendapat tugas dai guru saya yaitu Bp. TIMBUL DARJA'I...
Tugas Kali ini adalah membuat WEBSITE yang mempunyai form input,
edit, hapus dan tampil menggunakan PHP dan MYSQL, awalnya saya berfikir ini adalah tugas yang berat,
seberat ketika aku harus kehilangan wanita yang aku cintai. hahaha (lebay).. Namun setelah saya
belajar berjam-jam, berhari-hari, bahkan berabad-abad akhirnya saya bisa melahirnya sebuah karya pertama saya.
menurut pemula seperti saya web ini lumaya untuk presentasi di depan kelas,
di depan teman teman yang manis dan imut". hehe padahal pas-pasan semua wkwkwkwk.
Tutorial nya beginii:
  1. Buat Database data
Masuk ke phpmyadmin dan buat datanase dgn nama “data”
  1. Buat table dgn nama posingan 
 
CREATE TABLE IF NOT EXISTS `postingan` (
  `ID` int(255) NOT NULL AUTO_INCREMENT,
  `Judul` varchar(500) NOT NULL,
  `Postingan` text NOT NULL,
  `Tanggal` date NOT NULL,
  `Gambar` varchar(500) NOT NULL,
  `Komentar` varchar(5000) NOT NULL,
  PRIMARY KEY (`ID`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;
  1. Buat koneksi  ke database ini scriptnya
<?php
$konek=mysql_connect("localhost","root","");
mysql_select_db("data");
?>
Simpan dgn nama koneksi.php pada folder koneksi.
  1. Membuat webnya
atas.php
<?php include "koneksi/koneksi.php"; ?>
<html>
<head> <title>Achun Web</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link href="image/logoizun.png" rel="shortcut icon" />
</head>
<body>
<header id="header">
<div class="sosial">
                <img src="image/icon/email.png" class="gbemail">
                <img src="image/icon/facebook.png" class="gbfb">
                <img src="image/icon/twitter.png" class="gbtwit">
                <img src="image/icon/rss.png" class="gbrss"></div>

</header>
<div id="logo">
                <a href="index.php">
                <img src="image/logoizun.png" class="logoizun"></a>
                <h1 class="judul"><a href="index.php">Zzzttt...</a></h1></p>
</div>
<div id="menu">
                <h3 class="home"><a href="index.php">Home</a></h3></p>
                <h3 class="menuinput"><a href="input.php">Buat Postingan</a></h3></p>
                <h3 class="menudata"><a href="tampil.php">Data Postingan</a></h3></p>
</div>
<div id="isi">
<br>
Simpan dgn nama atas.php
                samping.php

<div id="samping">

<h3 class="samping_menu">Postingan</h3>
                <?php
                                include"koneksi/koneksi.php";
                                $qqqa=mysql_query("select*from postingan order by ID desc limit 5");
                                while($qqa=mysql_fetch_array($qqqa)){
                ?>
                <p class="link_post">
                                <a href="izun.php?id=<?php echo $qqa[ID]?>">
                                <?php echo"$qqa[Judul]<br>"; }?></a>
                </p>
               
                <h3 class="samping_menu1">Contact</h3>
                <p class="contact_person">
                                izunkoplak@ymail.com<br>
                                inzoentachmad.blogspot.com
                </h4>
</div>
                Simpan dgn nama samping.php

                bawah.php
               
<br>
</div>
<!-- Footer -->
<div id="eek2"></div>
<div id="eek">

                <h5 class="tulisanbawah">Copyright &copy; <a class="b" href="#">InzOent</a>, <?php echo date('Y'); ?>.
                </h5>
               
                </div>
                <div id="bawah">
               
                               
               
                </div>
                <!-- Footer end -->

</body>
</html>
                Simpan dgn nama bawah.php

                Index.php
               
<?php
include"atas.php";
                include"samping.php";
?>
                <div id="post">
                                <?php
                $sql = mysql_query("SELECT * FROM postingan ORDER BY ID DESC limit 3");
               
                while ($r=mysql_fetch_array($sql)){
                $konten = substr($r['Postingan'],0,300);
                ?>
                <h3 class="jd_wel">
                <a href="izun.php?id=<?php echo $r['ID']; ?>">
                <?php echo $r['Judul']; ?>
                </a></h3>
               
                <?php echo $r['Tanggal']; ?>
                <p id="isiwel">
                <table><tr><td>
                <?php
                echo"<img src='koneksi/$r[Gambar]' width=50 height=50>";
                ?>
                </td><td>
                <?php
                echo $konten;
                ?>
                </td></tr></table>
                <a  href="izun.php?id=<?php echo $r['ID']; ?>">
                Baca Selengkapnya...</a></p><br>
                <?php } ?>
               
                               
                               
                </div>
                                <?php
               
                                include "bawah.php";
                                ?>
Simpan dgn nama index.php

                Izun.php
<?php
                $id = $_GET['id'];
                $page = $_GET['page'];
                ?>
<?php include "atas.php";
?>
<div id="post">
<?php
                                $ql = mysql_query ("SELECT * FROM postingan WHERE ID='$id'");
                                $b = mysql_fetch_array($ql);
?>
                                <h3><?php echo "$b[Judul]"; ?></h3>
                                <?php echo "<p class='tgl_post'>$b[Tanggal]</p>"; ?>
                                <div class="isipostingan">
                                <?php echo "<img class='gmb_post' src='koneksi/$b[Gambar]'>$b[Postingan]"; ?>
                                </div>
                                <br>
                                <br>
                                                               
                                <p class='back'><a href='index.php'>Kembali</a></p>
                                                <br>
<form name="input" enctype="multipart/form-data" action="koneksi/komentar.php" method="post">
                <table>
                                <tr><td>Komentar</td><td>:<input type="text" name="komentar"></td></tr>
                                <tr><td></td><td><input type="submit" value="Kirim"><input type="reset" value="Ulangi"></td></tr>
                                               
                </table>
</form>
                                </div>
                                               
<?php include "bawah.php"; ?>
                Simpan dgn nama izun.php

                Tampil.php
<?php
include"atas.php";
?><div id="post_semua">
<?php
include"koneksi/koneksi.php";
$a=mysql_query("select * from postingan");
                echo"<table align='center'><tr>";
                                echo"<td>ID</td>";
                                echo"<td>Judul</td>";
                                echo"<td>Postingan</td>";
                                echo"<td>Tanggal</td>";
                                echo"<td>Gambar</td>";
                                echo"<td>Komentar</td></tr>";
               
while($b=mysql_fetch_array($a)){
$konten = substr($b['Postingan'],0,100);
                echo"<tr><td>$b[ID]</td>";
                echo"<td>$b[Judul]</td>";
                echo"<td>$konten</td>";
                echo"<td>$b[Tanggal]</td>";
                echo"<td><img src='koneksi/$b[Gambar]' width=30 height=50></td>";
                echo"<td>$b[Komentar]</td>";
                echo"<td><a href='edit.php?id=$b[ID]'>Edit</a></td>";
                echo"<td><a href='koneksi/hapus.php?id=$b[ID]'>Hapus</a></td>";
}
                echo"</tr></table>";
?>
</div>
<?php
                include"bawah.php";
?>
Simpan dgn nama tampil.php

Input.php
<?php
include"atas.php";
include"koneksi/koneksi.php";
?>
<div id="post">
<form name="input" enctype="multipart/form-data" action="koneksi/proses.php" method="post">
               
                                Judul<br><input type="text" name="judul" size="98"><br>
                                <textarea type="text" name="postingan" cols="75" rows="10"></textarea><br>
                                Tanggal<br><input type="date" name="tanggal" value="<?php date(dd/mm/yyyy); ?>"><br>
                                Gambar<br><input name="gmb" type="file"></textarea><br>
                                Komentar<br><input type="text" name="komentar"><br>
                                <input type="submit" value="Kirim"><input type="reset" value="Ulangi">
                                               

</form>
</div>
<?php
include"bawah.php";
?>
Simpan dgn nama input.php

Edit.php
<?php
include"atas.php";
include"koneksi/koneksi.php";
$tampil=mysql_query("select * from postingan where ID='$_GET[id]'");
$r=mysql_fetch_array($tampil);
?>
<div id="post">

<form name='input' enctype='multipart/form-data' action='koneksi/prosesedit.php' method='post'>
                Judul<br><input type='text' name='judul' size='98' value='<?php echo"$r[Judul]";?>'><br>
                <textarea type='text' name='postingan' cols='75' rows='10'><?php echo"$r[Postingan]";?></textarea><br>
                Tanggal<br><input type='date' name='tanggal' value='<?php echo"$r[Tanggal]";?>'><br>
                Gambar<br><img src='koneksi/$r[Gambar]' height='50' width='50'><br><input type='file' name='gmb'><br>
                Komentar<br><input type='text' name='komentar' value='<?php echo"$r[Komentar]";?>'><br>
                <input type='submit' value='Update'>
                <input name='id' type='hidden' value='<?php echo"$r[ID]"; ?>'>
               
</form>

<br><a href="tampil.php">Batal</a>
</div>
<?php
include"bawah.php";
?>
Simpan dgn nama edit.php

Hapus.php
<?php
include"koneksi.php";

$hapus=mysql_query("DELETE from postingan where ID='$_REQUEST[id]'");
if($hapus){
                echo"<script>window.alert('Berhasil Di Hapus !');
                window.location=('../tampil.php')</script>";
}
else{
                echo"<script>window.alert('Gagal Di Gagal !');
                window.location=('../tampil.php')</script>";
}
?>
Simpan dgn nama hapus.php

Proses.php
<?php
include"koneksi.php";
$a=$_POST[judul];
$b=$_POST[postingan];
$c=$_POST[tanggal];
$e=$_POST[komentar];

$ajudul=($_POST['judul']=="");


$d="upload/".$_FILES['gmb']['name'];

move_uploaded_file($_FILES['gmb']['tmp_name'],"upload/".basename($_FILES['gmb']['name'])); //save gambar ke folder
   

if($ajudul){
               
echo"<script>window.alert('Masukkan Judul Dulu !');
                window.location=('../input.php')</script>";       
}
else{
                $proses=mysql_query("insert into postingan (Judul,Postingan,Tanggal,Gambar,Komentar) values ('$a','$b','$c','$d','$e') ");
                echo"<script>window.alert('Berhasil Di Tambahkan !');
                window.location=('../index.php')</script>";
                }
?>
Simpan dgn nama proses.php proses ini adalah proses pada form input tepatnya pada input.php yang telah di buat tadi.

Prosesedit.php
<?php
include"koneksi.php";
$a=$_POST[judul];
$b=$_POST[postingan];
$c=$_POST[tanggal];
$e=$_POST[komentar];


$d="upload/".$_FILES['gmb']['name'];

move_uploaded_file($_FILES['gmb']['tmp_name'],"upload/".basename($_FILES['gmb']['name'])); //save gambar ke folder
   
$edit = mysql_query("update postingan set Judul='$a',
Postingan='$b',
Tanggal='$c',
Gambar='$d',
Komentar='$e'
where ID='$_POST[id]'");
               
if($edit){
                echo"<script>window.alert('Berhasil Di Edit !');
                window.location=('../tampil.php')</script>";
}
else{

                echo"<script>window.alert('Gagal Di Edit !');
                window.location=('../tampil.php')</script>";
}
?>
Simpan dgn nama prosesedit.php proses ini adalah proses pada form input tepatnya pada edit.php yang telah di buat tadi.

Untuk mempercantik tampilan biar cantik kaya gebetan saya hehe ni scriptnya
Style.css
body{
                background:url(../image/wilshere.jpg);
                background-attachment: fixed;
               
}

/*iki coding.e posisi nduwur ya*/
header#header{
filter:alpha(opacity=70);
opacity: .7;
margin:0 auto;
border-radius:25px 25px 0 0;
width:80%;
height: 50px;
background: url(../image/bgatas.png)repeat-x center 80%;
}
#logo{
                width:80%;
                margin:-5px auto;
                height:100px;
                background:#808088;
}
.logoizun{
                margin:auto 5px;
}
.judul{
                margin-left:150px;
                margin-top:-35px;
}
.judul a{
                text-decoration:none;
                color:#000;
}
.sosial{
                float:right;
                margin:50px auto;
}
#menu{
                width:80%;
                margin:-20px auto;
                height:50px;
                background: url(../image/bgatas.png)repeat-x;
}
.home{
                padding:8px;
}
.home a{
                text-decoration:none;
                color:#000;
}
.home a:hover{
                background:#808088;
                border-radius:5px 5px 5px 5px;
                color:#fff;
}
.menuinput{
                margin-top:-57px;
                padding:8px;
                margin-left:75px;
}
.menuinput a{
                text-decoration:none;
                color:#000;
}
.menuinput a:hover{
                background:#808088;
                border-radius:5px 5px 5px 5px;
                color:#fff;
}
.menudata{
                margin-top:-57px;
                padding:8px;
                margin-left:225px;
}
.menudata a{
                text-decoration:none;
                color:#000;
}
.menudata a:hover{
                background:#808088;
                border-radius:5px 5px 5px 5px;
                color:#fff;
}



/* Menu Samping Tengen */
#samping{
                border-radius:5px 5px 5px 5px;
                background:#808080;
                float:right;
                width:35%;
                margin-top:-10px;
}
.samping_menu{
                margin-top:-0px;
                background:#000;
                color:#fff;
                text-align:center;
}
.samping_menu1{
                background:#000;
                color:#fff;
                text-align:center;
}
.link_post{
                border-radius:3px 3px 3px 3px;
                text-align:center;
                width:100%;
                margin:0 auto;
}
.link_post a{
                text-decoration:none;
                color:#000;
}
.contact_person{
text-align:right;
padding:5px;

}

#isi{
                filter:alpha(opacity=70);
                opacity: .7;
                width:80%;
                margin:-10px auto;
                background:url(../image/isi.png);
}
.tgl_post{
                margin-top:-15px;
                font-size:15px;
                font:bold;
}
.gmb_post{
                float: right;
                margin: 0px 0px 0px 0px;
                width: 100px;
                height: 100px;
}
.isipostingan{
                background:#8B8B8B;
                border-radius:5px 5px 5px 5px;
}

/* pas isine */
#post{
                width:60%;
                margin:auto 10px;
}
.jd_wel a{
                text-decoration:none;
                color:#000;
}
.jd_wel a:hover{
                color:#fff;
}
#isiwel{
                border-radius:5px 5px 5px 5px;
                padding:5px;
                background:#808088;
}
#isiwel a{
                text-decoration:none;
                color:#f1f1f4;
}
#post_semua{
                width:90%;
                margin: 0 auto ;
}




/*kode paling ngisor*/
#eek2{
                height:20px;
                width:80%;
                margin:0 auto;
                background:#808088;
}
#eek{
                margin:0 auto;
                height:45px;
                width:80%;
                background:url(../image/bgatas.png)repeat-x;
                border-radius:0 0 25px 25px;
}
.tulisanbawah{
                float:right;
                font-size:15px;
                margin-top:10px;
                margin-right:10px;
                color:#000;
}
.tulisanbawah  a{
                text-decoration:none;
                color:#000;
}
                Simpan dgn nama style.css
berikut screenshot web yang saya buat:
ini adalah menu HOme pada menu ini menampilkan postingan yang telah di buat dan disimpan pada database
serta di tampilkan dgn PHP, untuk pengaturan tampilan saya menggunakan CSS. nanti bisa di download kok tenang aja.

dan ini gambar pada form input.
bagi teman-teman yang ingin memiliki nya silahkan download aja DISINI. Atau klik pada gambar download di bawah.
saya kasih lengkap tak ada yang di sembunyikan haha.
sekian dari saya semoga bermanfaat.





http://www.4shared.com/rar/_EjHjhf1/Tugas_tbl_inzoentachmadblogspo.html

pass rar: inzoentachmad

Sudah Di Update, Bila ada Masalah Silahkan beritahu saya di komentar.

Share this post:

Tags: ,

23 comments:

  1. UnknownNovember 18, 2013 at 7:52 PM

    hihi

    ReplyDelete
  2. MikhwanAlySNovember 30, 2013 at 10:15 PM

    Artikel yang menarik untuk didokumentasikan dalam blog. Lebih bagusnya lagi kalau dikasih live demo-nya. Untuk live demo bisa dihost ke dropbox atau hostingan gratisan lainnya

    ReplyDelete
  3. samzDecember 23, 2014 at 2:16 PM

    mau dong mentahannya udah ga bisa di download soalnya

    ReplyDelete
  4. Arry AkbarSeptember 15, 2015 at 6:15 PM

    Thank's bro...

    ReplyDelete
  5. reisvavaOctober 19, 2015 at 1:32 PM

    thanks yha brother.. salam dari Tetanga Timor-Leste

    ReplyDelete
    Replies
    1. Achmad FaizunOctober 31, 2015 at 5:34 AM

      Sama-sama salam balik dari tuan rumah Indonesia :)

      Delete
  6. Risky Perdana PutraNovember 22, 2015 at 11:17 PM

    Ini yang saya cari cari :D

    ReplyDelete
  7. AnonymousDecember 12, 2015 at 1:39 PM

    permisi kak, knp semua file harus .php kenapa buka html ???

    ReplyDelete
  8. UnknownDecember 14, 2015 at 8:32 PM

    Password nya apa ya? File rar nya di kunci, boleh tau ga?

    ReplyDelete
  9. AnonymousDecember 15, 2015 at 10:17 AM

    Thanks bro...

    ReplyDelete
  10. RdkDecember 17, 2015 at 12:13 AM

    trima kasih saudaraku, akhirnya setelah belajar dari blog ini dan liat artikel sono sini saya juga berhaasil membuat sebuah aplikasi php sederhana aplikasi sekolah ... terima kasih mas izun

    ReplyDelete
  11. Willy SyaputraMay 10, 2016 at 9:12 PM

    gan boleh saya minta programnya soalnya ngk bisa download .. klu boleh kirim ke willysyaputra313@yahoo.co.id semoga ilmunya bertambah gan amiiin...

    ReplyDelete
    Replies
    1. UnknownFebruary 13, 2017 at 11:40 AM

      saya juga mau dong mas mentahan programnya, kalo berkenan bisa dikirim ke budhiyart@gmail.com. terimakasih sebelumnya dan salam kenal :)

      Delete
  12. vrijkocdhSeptember 1, 2016 at 8:25 PM

    makasih mas, semoga terus menebar ilmu

    ReplyDelete
  13. SkyprojecJanuary 31, 2017 at 8:17 AM

    Setelah buat data kayak di atas kita apaiin ?

    ReplyDelete
  14. UnknownFebruary 13, 2017 at 4:02 PM

    trima ksih mz..smoga tuhan memberkatimu dan jgn pernh posting yg hoax ya.

    ReplyDelete
  15. UnknownApril 27, 2017 at 4:52 AM

    saya mau dong bro file mentahanya sama databasenya kirim ke gmail saya fardha.hari@gmail.com

    ReplyDelete
  16. FarhanMay 5, 2017 at 5:17 PM

    gk bsa d download gan
    bsa kirim email? farhanarchman@gmail.com

    ReplyDelete

Subscribe to: Post Comments (Atom)
Gandem Design © . Designed by Templates by Kate.